/*
  File role: VOGO eBS ECM landing (vogo.me/ecm/) — self-contained institutional
  navy chrome. Forked from ro/e-gov/e-gov.css so /ecm is DECOUPLED from the e-gov
  page (edits there no longer affect /ecm). Institutional navy sub-brand tokens are
  defined ONCE in :root below; global colors/fonts + the standard footer come from
  general/styles.css + general/index.css (linked before this file).
  ECM-specific supplements (4-up grid + quick chips) are appended at the very end.
  @file_version 1.2.8
*/
    /* =========================================================
     * e-gov.vogo.me — page-specific styles.
     * Content sections: institutional navy + Romanian tricolor.
     * Chrome (header/buttons/footer) = standard VOGO components;
     * only the header's GREEN accents are retinted to navy below.
     * ========================================================= */

    :root {
      --navy-950: #050f29;
      --navy-900: #001120;   /* the dark of /ro/ and of /ro/e-reg/ */
      --navy-800: #04203c;   /* the band that sits under it */
      --navy-700: #122d68;
      --navy-600: #1c3f8f;
      --steel:    #4d6bb3;
      --azure:    #2f6bff;
      --azure-2:  #5b8cff;
      --ro-blue:   #0a3aa6;
      --ro-yellow: #ffcf2e;
      --ro-red:    #d61f33;
      --paper:    #f5f7fc;
      --paper-2:  #eef2fb;
      --card:     #ffffff;
      --ink:      #0a1838;
      --muted:    #56638a;
      --line:     #dde4f3;
      --radius:   16px;
      --radius-l: 26px;
      --shadow:   0 20px 50px -24px rgba(7,23,58,.45);
      --shadow-s: 0 8px 22px -12px rgba(7,23,58,.40);
      --maxw: 1200px;
      --ease: cubic-bezier(.22,.61,.36,1);
    }

    /* ---- Accessibility runtime classes (WCAG toolbar) ---- */
    html.a11y-contrast { filter: contrast(1.22); }
    html.a11y-grayscale { filter: grayscale(1); }
    html.a11y-contrast.a11y-grayscale { filter: contrast(1.22) grayscale(1); }
    html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; }
    html.a11y-bigcursor, html.a11y-bigcursor * {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 2l14 9-6 1 4 8-3 1-4-8-5 4z'/%3E%3C/svg%3E") 4 2, auto;
    }
    html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
      animation: none !important; transition: none !important;
    }

    /* Page body uses standard VOGO body font; sections set their own bg. */
    .egov-page { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); }
    .egov-page h1, .egov-page h2, .egov-page h3, .egov-page h4 {
      font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 0;
    }
    .egov-page p { margin: 0; }
    .egov-page img { max-width: 100%; display: block; }
    .egov-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    /* ===== Institutional flag bar (drapel) + hero — style from /servicii-digitale-pentru-cetateni/ ===== */
    .vogo-topbar, .vogo-topbar *, .vogo-gov-hero, .vogo-gov-hero * { box-sizing: border-box; }
    .vogo-topbar {
      position: relative;
      background:
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.08), transparent 45%),
        linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%);
      color: #fff; padding: 14px 36px; margin: 0; overflow: hidden;
      font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      box-shadow: 0 2px 6px rgba(12,47,89,.18);
    }
    .vogo-topbar::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
      background: linear-gradient(90deg, #002b7f 0%, #002b7f 33.33%, #fcd116 33.33%, #fcd116 66.66%, #ce1126 66.66%, #ce1126 100%);
    }
    .vogo-topbar__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
    .vogo-topbar__row { display: flex; align-items: center; gap: 14px; }
    .vogo-crest { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #0C2F59; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
    .vogo-crest img { width: 44px; height: 44px; object-fit: contain; display: block; }
    .vogo-brand { display: flex; flex-direction: column; line-height: 1.2; }
    .vogo-brand-line1 { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: #fff; font-weight: 600; }
    .vogo-brand-line2 { font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px; }
    /* Neutral institutional crest (no national coat of arms). */
    .vogo-crest i { font-size: 30px; color: #0C2F59; line-height: 1; }
    @media (max-width: 720px) {
      .vogo-topbar__row { flex-wrap: wrap; }
    }

    /* White band around the hero — the panel is capped at content width (1200px,
       like the model's Elementor container) so white margins show on the sides. */
    /* Banda fara padding lateral: hero-ul albastru merge dintr-o margine in alta. */
    .vogo-gov-hero-band { background: #fff; padding: 0; }
    .vogo-gov-hero {
      background:
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.08), transparent 45%),
        linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%);
      /* Latime completa: continutul ramane centrat prin .vogo-gov-hero__inner. */
      color: #fff; padding: 40px 36px 48px; border-radius: 0; max-width: none; margin: 0 0 28px;
      overflow: hidden; position: relative;
      font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    .vogo-gov-hero__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
    /* .egov-page prefix raises specificity above the generic `.egov-page h1` rule
       so the cloned-source hero-title values (weight 700, line-height 1, the 18px
       bottom margin = gap to the lead) win — matching /servicii-digitale-pentru-cetateni/. */
    .egov-page .vogo-gov-hero__title { font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; margin: 0 0 18px; color: #fff; }
    .vogo-gov-hero__title span { color: #56B8E4; }
    /* Underline only under "autorități și cetățeni", NOT under "pentru". */
    .vogo-gov-hero__title .vogo-gov-hero__uline { border-bottom: 3px solid rgba(86,184,228,.55); padding-bottom: 4px; }
    /* Marginea de jos separă lead-ul de banda de itemi. Prefixul .egov-page e obligatoriu:
       fără el, regula generică `.egov-page p { margin: 0 }` de mai sus are specificitate mai
       mare și anulează marginea, indiferent de valoarea scrisă aici. */
    .egov-page .vogo-gov-hero__lead { font-size: clamp(1.05rem, 1.86vw, 1.5rem); line-height: 1.42; font-weight: 400; color: rgba(255,255,255,.88); max-width: none; text-align: justify; hyphens: auto; margin: 0 0 56px; }
    /* Fiecare reper are chenarul lui: fundalul și bordura stau pe item, nu pe containerul benzii. */
    .vogo-gov-hero__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
    .vogo-gov-hero__strip-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.4; padding: 13px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; }
    .vogo-gov-hero__strip-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
    .vogo-gov-hero__strip-icon svg { width: 16px; height: 16px; }
    /* Itemii adăugați folosesc iconițe Bootstrap Icons; se aduc la aceeași mărime cu SVG-urile. */
    .vogo-gov-hero__strip-icon i { font-size: 16px; line-height: 1; }
    .vogo-gov-hero__strip-text strong { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 1px; }
    .vogo-gov-hero__strip-text span { color: rgba(255,255,255,.7); font-size: 11.5px; }
    /* Hero title responsive sizes match the model /servicii-digitale-pentru-cetateni/ (28/24/20px). */
    @media (max-width: 860px) { .vogo-gov-hero { padding: 36px 22px 32px; } .egov-page .vogo-gov-hero__title { font-size: 28px; } .vogo-gov-hero__strip { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .egov-page .vogo-gov-hero__title { font-size: 24px; } .vogo-gov-hero__lead { font-size: 15px; } .vogo-gov-hero { padding: 28px 18px 26px; } }
    @media (max-width: 480px) { .vogo-gov-hero__strip { grid-template-columns: repeat(2, 1fr); padding: 12px; } .egov-page .vogo-gov-hero__title { font-size: 20px; } .vogo-crest { width: 44px; height: 44px; } .vogo-crest img { width: 34px; height: 34px; } .vogo-brand-line2 { font-size: 14px; } .vogo-topbar { padding: 10px 16px; } }
    /* Mobile — CTA buttons full-width at narrow viewport (≤600px) */
    @media (max-width: 600px) { .egov-cta-btn { width: 100%; justify-content: center; } .egov-intro-actions { gap: 10px; } }

    /* ===== Buttons: standard .imp-btn, with a light variant for dark sections ===== */
    .egov-page .imp-btn-primary { background: var(--azure); box-shadow: 0 10px 24px -10px rgba(47,107,255,.7); }
    .egov-page .imp-btn-primary:hover { background: #2358e0; }
    /* Ghost on dark (navy) backgrounds — standard ghost is dark-on-light, invisible on navy. */
    .on-dark .imp-btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
    .on-dark .imp-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

    /* ---- Reusable tricolor hairline + eyebrow ---- */
    .tricolor { height: 4px; background: linear-gradient(90deg, var(--ro-blue) 0 33.33%, var(--ro-yellow) 33.33% 66.66%, var(--ro-red) 66.66% 100%); }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--ro-yellow); }

    /* (hero now uses the institutional .vogo-gov-hero — see flag bar CSS above) */

    /* ---- Intro strip ---- */
    .egov-intro { background: var(--card); border-bottom: 1px solid var(--line); }
    .egov-intro .egov-container { padding-top: 54px; padding-bottom: 54px; }
    .egov-intro p { font-size: 1.18rem; line-height: 1.7; color: #2c3a63; max-width: 980px; }
    .egov-intro strong { color: var(--pk-ember, #E4812F); }  /* intro highlight in the orange of /ro/ (27.09.2026) */

    /* ---- Section scaffolding ---- */
    .section { padding: 92px 0; position: relative; }
    .section.alt { background: var(--paper-2); }
    .section.dark { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: #fff; }
    .section-head { max-width: 760px; margin: 0 auto 54px; text-align: center; }
    .section-head h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); margin-top: 14px; color: var(--ink); }
    .section.dark .section-head h2 { color: #fff; }
    .section-head .eyebrow { justify-content: center; }
    .section-head p { margin-top: 16px; color: var(--muted); font-size: 1.08rem; }
    .section.dark .section-head p { color: rgba(226,233,250,.72); }

    /* ---- Feature cards ---- */
    .cards { display: grid; gap: 22px; }
    .cards.c3 { grid-template-columns: repeat(3, 1fr); }
    .cards.c2 { grid-template-columns: repeat(2, 1fr); }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-s); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position: relative; overflow: hidden; }
    .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ro-blue), var(--ro-yellow), var(--ro-red)); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
    .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #c7d3ee; }
    .card:hover::before { transform: scaleY(1); }
    .section.dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
    .card-ic { width: 50px; height: 50px; border-radius: 13px; background: linear-gradient(135deg, var(--navy-700), var(--azure)); display: grid; place-items: center; margin-bottom: 18px; box-shadow: 0 10px 22px -10px rgba(28,63,143,.7); }
    /* Portal section card icons: rounded 5px + vogo blue from the header/topbar (#0C2F59). */
    #portal .card-ic { border-radius: 5px; background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); }
    /* "Identitate digitală verificată" icons — cci style (blue line glyph) rendered as a
       large, 50%-transparent watermark BEHIND the card text. Absolute + the card's own
       overflow:hidden so the icon (3× bigger) never grows the card. */
    #identitate .card-ic { position: absolute; top: 10px; right: 18px; left: auto; margin: 0; padding: 0; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; opacity: .15; z-index: 0; pointer-events: none; }
    #identitate .card-ic i { font-size: 126px; line-height: 1; color: #1c6fb5; }
    /* Keep the text above the watermark icon. */
    #identitate .card > :not(.card-ic) { position: relative; z-index: 1; }
    .card-ic i { font-size: 24px; color: #fff; }
    .card h3 { font-size: 1.22rem; color: var(--ink); }
    .section.dark .card h3 { color: #fff; }
    .card > p { margin-top: 10px; color: var(--muted); font-size: .96rem; }
    .section.dark .card > p { color: rgba(226,233,250,.72); }
    .card ul { margin: 14px 0 0; padding: 0; list-style: none; }
    .card ul li { position: relative; padding-left: 26px; margin-top: 10px; font-size: .93rem; color: #3c4a72; line-height: 1.5; }
    .section.dark .card ul li { color: rgba(226,233,250,.82); }
    .card ul li i { position: absolute; left: 0; top: 2px; color: var(--azure); font-size: 15px; }

    /* ---- Wizard ---- */
    .wizard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .wstep { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; box-shadow: var(--shadow-s); }
    .wstep .wnum { font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 2.4rem; background: linear-gradient(120deg, var(--azure), var(--navy-600)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
    .wstep h4 { font-size: 1.08rem; margin-top: 10px; color: var(--ink); }
    .wstep p { font-size: .9rem; color: var(--muted); margin-top: 8px; }
    .wstep:not(:last-child)::after { content: "\F285"; font-family: "bootstrap-icons"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--steel); z-index: 3; font-size: 16px; }

    .flow-extras { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 36px; }
    .flow-extras > div { display: flex; gap: 12px; align-items: flex-start; }
    .flow-extras .fx-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--navy-700), var(--azure)); box-shadow: 0 8px 18px -10px rgba(28,63,143,.6); display: grid; place-items: center; }
    .flow-extras .fx-ic i { font-size: 17px; color: #fff; }
    .flow-extras b { display: block; color: var(--ink); font-size: .98rem; }
    .flow-extras span { color: var(--muted); font-size: .9rem; }
    .section.dark .flow-extras .fx-ic { background: linear-gradient(135deg, var(--navy-700), var(--azure)); }
    .section.dark .flow-extras .fx-ic i { color: #fff; }
    .section.dark .flow-extras b { color: #fff; }
    .section.dark .flow-extras span { color: rgba(226,233,250,.7); }

    /* ---- Integrations table ---- */
    .integr { max-width: 920px; margin: 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.03); }
    .integr-row { display: grid; grid-template-columns: 200px 1fr; }
    .integr-row { border-bottom: 1px solid rgba(255,255,255,.1); }
    .integr-row:last-child { border-bottom: 0; }
    .integr-row:hover { background: rgba(255,255,255,.05); }
    .integr-k { padding: 18px 24px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; border-right: 1px solid rgba(255,255,255,.1); }
    .integr-k .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ro-yellow); flex-shrink: 0; }
    .integr-v { padding: 18px 24px; color: rgba(226,233,250,.78); font-size: .96rem; }

    /* ---- Industries ---- */
    .industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .ind { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: transform .25s var(--ease), box-shadow .25s; box-shadow: var(--shadow-s); }
    .ind:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .ind-h { display: flex; align-items: center; gap: 12px; }
    .ind-ic { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--navy-700), var(--azure)); box-shadow: 0 8px 18px -10px rgba(28,63,143,.6); display: grid; place-items: center; flex-shrink: 0; }
    .ind-ic i { font-size: 20px; color: #fff; }
    .ind h4 { font-size: 1.04rem; color: var(--ink); }
    .ind p { margin-top: 10px; color: var(--muted); font-size: .88rem; line-height: 1.55; }

    /* ---- Security band ---- */
    .sec-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
    .sec-list { display: grid; gap: 14px; }
    .sec-item { display: flex; gap: 14px; align-items: flex-start; }
    .sec-item .si-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--navy-700), var(--azure)); box-shadow: 0 8px 18px -10px rgba(28,63,143,.6); display: grid; place-items: center; }
    .sec-item .si-ic i { font-size: 20px; color: #fff; }
    .sec-item b { color: #fff; display: block; }
    .sec-item span { color: rgba(226,233,250,.7); font-size: .92rem; }
    .sec-badges { display: flex; flex-wrap: wrap; gap: 12px; }
    .sec-badge { flex: 1 1 130px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px; text-align: center; }
    .sec-badge .sb-num { font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 2rem; color: #fff; }
    .sec-badge .sb-lbl { font-size: .78rem; color: var(--azure-2); font-weight: 700; letter-spacing: .04em; margin-top: 4px; }

    /* ---- Mobile app ---- */
    .app-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: center; }
    .phone { width: 250px; height: 510px; margin: 0 auto; border-radius: 38px; position: relative; background: linear-gradient(165deg, var(--navy-800), var(--navy-950)); border: 9px solid #0a1530; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); padding: 18px 14px; overflow: hidden; }
    .phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); }
    .ph-top { margin-top: 18px; display: flex; align-items: center; gap: 8px; padding: 10px; background: rgba(255,255,255,.04); border-radius: 12px; }
    .ph-top .pc-seal { width: 20px; height: 20px; }
    .ph-top small { color: #fff; font-size: .6rem; font-weight: 700; }
    .ph-card { margin-top: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; }
    .ph-card .pc-line { background: rgba(255,255,255,.1); }
    .ph-chip { display: inline-block; font-size: .56rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(47,107,255,.25); color: var(--azure-2); letter-spacing: .08em; }
    .ph-ai { position: absolute; bottom: 20px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--azure); border-radius: 12px; box-shadow: 0 12px 24px -10px rgba(47,107,255,.8); }
    .ph-ai i { font-size: 16px; color: #fff; }
    .ph-ai small { color: #fff; font-size: .68rem; font-weight: 700; }

    /* MAF mobile app shot (real image instead of CSS mockup) */
    .maf-shot { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

    /* ---- CTA ---- */
    .cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); border-radius: var(--radius-l); padding: 64px 56px; text-align: center; color: #fff; box-shadow: var(--shadow); }
    .cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); }
    .cta h2 { position: relative; font-size: clamp(2rem, 4vw, 2.9rem); }
    .cta p { position: relative; margin: 16px auto 30px; max-width: 560px; color: rgba(226,233,250,.85); font-size: 1.1rem; }
    .cta-actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
    /* Inline demo-request form (on the dark CTA panel) */
    .egov-demo-form { position: relative; max-width: 720px; margin: 30px auto 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; text-align: left; }
    .egov-demo-form .edf-title { font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; color: #fff; font-size: 1.02rem; margin-bottom: 14px; }
    .egov-demo-form .edf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
    .egov-demo-form input, .egov-demo-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-family: "Open Sans", Inter, sans-serif; font-size: .95rem; padding: 11px 14px; }
    .egov-demo-form textarea { resize: vertical; min-height: 78px; }
    .egov-demo-form input:focus, .egov-demo-form textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(47,107,255,.25); }
    .egov-demo-form .edf-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
    .egov-demo-form .edf-status { font-size: .9rem; font-weight: 600; }
    .egov-demo-form .edf-status.ok { color: #5fd6a6; }
    .egov-demo-form .edf-status.err { color: #ff9aa2; }
    .egov-demo-form.sending #egovDemoSubmit { opacity: .6; pointer-events: none; }
    .egov-demo-form.flash { animation: edfFlash 1.2s var(--ease); }
    @keyframes edfFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(86,184,228,.65); } }
    @media (max-width: 600px) { .egov-demo-form .edf-row { grid-template-columns: 1fr; } }
    /* Elegant toast (e.g. "Completează mini-formularul de mai sus.") */
    .egov-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 130; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #0C2F59 0%, #01255C 100%); color: #fff; font-family: Inter, sans-serif; font-weight: 600; font-size: .95rem; padding: 13px 20px; border-radius: 8px; box-shadow: 0 18px 40px -12px rgba(5,15,41,.7); border: 1px solid rgba(255,255,255,.16); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); max-width: calc(100vw - 32px); }
    .egov-toast.show { opacity: 1; transform: translate(-50%, 0); }
    .egov-toast i { color: #56B8E4; font-size: 18px; flex-shrink: 0; }

    /* ---- WCAG floating toolbar ---- */
    .a11y-fab { position: fixed; left: 20px; bottom: 20px; z-index: 80; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; background: var(--navy-700); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(7,23,58,.7); transition: transform .25s var(--ease); }
    .a11y-fab:hover { transform: scale(1.08); }
    .a11y-fab i { font-size: 24px; }
    .a11y-panel { position: fixed; left: 20px; bottom: 86px; z-index: 81; width: 280px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 30px 70px -24px rgba(7,23,58,.55); border: 1px solid var(--line); transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none; transition: .28s var(--ease); }
    .a11y-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
    .a11y-panel h4 { font-family: Inter, sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 12px; }
    .a11y-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); cursor: pointer; font-size: .68rem; font-weight: 700; color: var(--ink); transition: .2s; text-align: center; }
    .a11y-opt:hover { border-color: var(--azure); }
    .a11y-opt.active { background: var(--azure); color: #fff; border-color: var(--azure); }
    .a11y-opt i { font-size: 18px; }
    .a11y-reset { margin-top: 10px; width: 100%; padding: 9px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--muted); font-weight: 700; font-size: .78rem; cursor: pointer; }
    .a11y-reset:hover { background: #e2e8f7; }

    /* ---- AI live launcher ---- */
    .ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(120deg, var(--azure), var(--navy-600)); color: #fff; font-family: Inter, sans-serif; font-weight: 700; font-size: .9rem; box-shadow: 0 16px 34px -12px rgba(47,107,255,.8); transition: transform .25s var(--ease); }
    .ai-fab:hover { transform: translateY(-2px); }
    .ai-fab .ai-ring { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; position: relative; }
    .ai-fab .ai-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); animation: egovPulse 2s infinite; }
    @keyframes egovPulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
    .ai-fab i { font-size: 17px; }
    /* Animated pulse ring on the live-assistant launcher icon (restores the animated look) */
    .vogo-public-ai__banner-icon { position: relative; }
    .vogo-public-ai__banner-icon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: egovPulse 2s infinite; pointer-events: none; }

    /* ---- Intro action buttons + info modals (AI certifications / services popups) ---- */
    .egov-intro-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
    /* Premium e-gov/vogo action buttons (institutional navy→azure, not flat) */
    /* Vogo button style: hero-navy fill (same gradient as the hero background), 5px corners. */
    .egov-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 0; border-radius: 5px; cursor: pointer; text-decoration: none; font-family: Inter, sans-serif; font-weight: 700; font-size: .98rem; line-height: 1.1; color: #fff; background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); box-shadow: 0 12px 28px -12px rgba(12,47,89,.7); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
    .egov-cta-btn:hover { color: #fff; }
    .egov-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(12,47,89,.85); }
    .egov-cta-btn i { font-size: 18px; flex-shrink: 0; color: #56B8E4; }
    /* --primary / --alt kept for markup compat; both render as the vogo-blue button. */
    .egov-cta-btn--primary, .egov-cta-btn--alt { color: #fff; background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); }
    .egov-cta-btn--primary i, .egov-cta-btn--alt i { color: #56B8E4; }
    /* "Vezi demo" — white bg, VOGO green text + icon, thin green border. */
    .egov-cta-btn--demo { background: #fff; color: var(--vogo-green, #0f7b65); border: 1px solid var(--vogo-green, #0f7b65); box-shadow: 0 8px 22px -12px rgba(7,23,58,.22); }
    .egov-cta-btn--demo:hover { background: #f3faf7; color: var(--vogo-green, #0f7b65); }
    .egov-cta-btn--demo i { color: var(--vogo-green, #0f7b65); }
    /* "Vezi repere SEAP" — VOGO green background. */
    .egov-cta-btn--seap { background: var(--vogo-green, #0f7b65); box-shadow: 0 12px 28px -12px rgba(15,123,101,.7); }
    .egov-cta-btn--seap:hover { background: var(--vogo-green-dark, #0a4f41); }
    .egov-cta-btn--seap i { color: #fff; }
    .egov-modal-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,15,41,.62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
    .egov-modal-overlay.open { opacity: 1; pointer-events: auto; }
    /* Popup design system mirrors /servicii-digitale-pentru-cetateni/: white cards,
       thin #e3e8ee border, 10px radius, no shadow, Open Sans body + Inter Tight navy
       headings, GREEN (--vogo-green, global token) icon tiles with white icons. */
    .egov-modal { width: 100%; max-width: 960px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 120px -30px rgba(5,15,41,.7); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); font-family: "Open Sans", Inter, system-ui, sans-serif; }
    .egov-modal-overlay.open .egov-modal { transform: none; opacity: 1; }
    .egov-modal__head { position: relative; padding: 26px 30px; color: #fff; background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); flex-shrink: 0; }
    .egov-modal__head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ro-blue) 0 33.33%, var(--ro-yellow) 33.33% 66.66%, var(--ro-red) 66.66% 100%); }
    .egov-modal__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #56B8E4; }
    .egov-modal__title { font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 8px; color: #fff; }
    .egov-modal__sub { margin-top: 8px; font-size: .96rem; color: rgba(226,233,250,.82); max-width: 720px; line-height: 1.5; }
    .egov-modal__close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; transition: background .2s; }
    .egov-modal__close:hover { background: rgba(255,255,255,.28); }
    .egov-modal__close i { font-size: 20px; }
    .egov-modal__body { padding: 26px 30px 32px; overflow-y: auto; }
    /* AI certifications: category cards (model card style) + concept chips */
    .ai-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ai-cat { border: 1px solid #e3e8ee; border-radius: 10px; padding: 24px; background: #fff; }
    .ai-cat-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .ai-cat-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--vogo-green, #0f7b65); display: grid; place-items: center; flex-shrink: 0; }
    .ai-cat-ic i { font-size: 20px; color: #fff; }
    .ai-cat-h h4 { font-family: "Inter Tight", Inter, sans-serif; font-size: 1.05rem; font-weight: 600; color: #0C2F59; }
    .ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ai-chip { font-family: "Open Sans", Inter, sans-serif; font-size: .82rem; font-weight: 600; color: #1a4d6e; background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 6px 12px; line-height: 1.3; }
    /* LLM providers & models section (after Securitate) — provider blocks + model sub-chips */
    .llm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .llm-prov { border: 1px solid #e3e8ee; border-radius: 10px; padding: 16px 18px; background: #fff; }
    .llm-prov-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .llm-prov-h .llm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vogo-green, #0f7b65); flex-shrink: 0; }
    .llm-prov-h h5 { font-family: "Inter Tight", Inter, sans-serif; font-size: .98rem; font-weight: 700; color: #0C2F59; margin: 0; }
    .llm-models { display: flex; flex-wrap: wrap; gap: 7px; }
    .llm-model { font-family: "Open Sans", Inter, sans-serif; font-size: .8rem; font-weight: 600; color: #1a4d6e; background: #f3f7f9; border: 1px solid #e3e8ee; border-radius: 7px; padding: 5px 10px; }
    /* Services: domain cards (model card style) + numbered service rows */
    .svc-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #0C2F59; background: #eef2f7; border-radius: 999px; padding: 7px 14px; font-size: .9rem; margin-bottom: 20px; }
    /* Services modal top row: count badge + datasheet download button. */
    .svc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
    .svc-top .svc-count { margin-bottom: 0; }
    .svc-datasheet { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: Inter, sans-serif; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); border-radius: 5px; padding: 9px 16px; transition: transform .2s var(--ease); }
    .svc-datasheet:hover { transform: translateY(-1px); color: #fff; }
    .svc-datasheet i { color: #56B8E4; font-size: 16px; }
    .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .svc-dom { border: 1px solid #e3e8ee; border-radius: 10px; padding: 24px; background: #fff; }
    .svc-dom-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .svc-dom-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--vogo-green, #0f7b65); display: grid; place-items: center; flex-shrink: 0; }
    .svc-dom-ic i { font-size: 20px; color: #fff; }
    .svc-dom-h h4 { font-family: "Inter Tight", Inter, sans-serif; font-size: 1rem; font-weight: 600; color: #0C2F59; line-height: 1.25; }
    .svc-dom ol { margin: 0; padding: 0; list-style: none; counter-reset: svc var(--svc-start, 0); }
    .svc-dom ol li { position: relative; padding: 8px 0 8px 34px; font-size: .9rem; color: #333; line-height: 1.45; border-top: 1px solid #eef1f4; counter-increment: svc; }
    .svc-dom ol li:first-child { border-top: 0; }
    .svc-dom ol li::before { content: counter(svc); position: absolute; left: 0; top: 8px; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 6px; background: var(--vogo-green, #0f7b65); color: #fff; font-size: .64rem; font-weight: 800; display: grid; place-items: center; }
    @media (max-width: 760px) { .ai-cat-grid, .svc-grid, .llm-grid { grid-template-columns: 1fr; } .egov-modal__body { padding: 20px; } .egov-modal__head { padding: 22px 20px; } .ai-cat, .svc-dom { padding: 18px; } }

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

    /* ---- Responsive ---- */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; gap: 44px; }
      .portal-card { transform: none; max-width: 460px; }
      .hero-grid:hover .portal-card { transform: none; }
      .cards.c3, .industries { grid-template-columns: 1fr 1fr; }
      .wizard { grid-template-columns: 1fr 1fr; }
      .wstep:nth-child(2)::after { display: none; }
      .sec-grid, .app-grid { grid-template-columns: 1fr; gap: 36px; }
    }
    @media (max-width: 720px) {
      .section { padding: 64px 0; }
      .cards.c3, .cards.c2, .industries, .wizard, .flow-extras { grid-template-columns: 1fr; }
      .integr-row { grid-template-columns: 1fr; }
      .integr-k { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
      .cta { padding: 44px 24px; }
      .wstep:not(:last-child)::after { display: none; }
    }

/* ============================================================
 * ECM landing supplements (not present in the copied chrome):
 * a 4-up module grid + the "Acces rapid" chips row.
 * ============================================================ */
/* Cards on the ECM landing use 5px rounded corners. */
.egov-page .card { border-radius: 5px; }

.egov-page .cards.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .egov-page .cards.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .egov-page .cards.c4 { grid-template-columns: 1fr; } }

/* Module icons — large translucent watermark, top-right (like e-gov "Identitate digitală"). */
.egov-page .cards.c4 .card { position: relative; overflow: hidden; }
.egov-page .cards.c4 .card-ic { position: absolute; top: 8px; right: 14px; left: auto; margin: 0; padding: 0; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; opacity: .14; z-index: 0; pointer-events: none; }
.egov-page .cards.c4 .card-ic i { font-size: 112px; line-height: 1; color: #0660a2; }
.egov-page .cards.c4 .card > :not(.card-ic) { position: relative; z-index: 1; }

/* "AI-powered" badge — standalone visual element under the hero subtitle. */
.ecm-ai-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(86,184,228,.12); border: 1px solid rgba(86,184,228,.38); color: #56B8E4; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ecm-ai-badge i { font-size: 15px; }

.ecm-quick { margin-top: 44px; text-align: center; }
.ecm-quick__label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 16px; }
.ecm-quick__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ecm-quick__chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--navy-700); }
.ecm-quick__chip i { color: var(--azure); font-size: 15px; }

/* ---- EUIPO trademark reference — full-width white band (moved from /ecm/doc) ---- */
.ecm-tmband { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.ecm-tmband__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.ecm-tmband__badge { height: 56px; width: auto; }
.ecm-tmband__titles { flex: 1; min-width: 240px; }
.ecm-tmband__titles h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink); margin: 4px 0 0; }
.ecm-tmband__titles p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.ecm-tmband__status { display: inline-flex; align-items: center; gap: 7px; background: #e8f6ee; color: #16a34a; border: 1px solid #bfe6cd; padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ecm-tmgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px; }
.ecm-tmgrid > div { display: flex; flex-direction: column; gap: 3px; padding: 13px 0; border-top: 1px solid var(--line); }
.ecm-tmgrid b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); font-weight: 700; }
.ecm-tmgrid span { color: var(--ink); font-size: 14.5px; line-height: 1.4; }
.ecm-tmline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 30px; padding: 22px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; }
.ecm-tmline > div { text-align: center; }
.ecm-tmline__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--azure); margin: 0 auto 9px; box-shadow: 0 0 0 4px rgba(47,107,255,.14); }
.ecm-tmline b { display: block; font-family: "Inter Tight", Inter, sans-serif; font-size: 14px; color: var(--navy-700); }
.ecm-tmline > div > span:not(.ecm-tmline__dot) { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ecm-tmband__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) { .ecm-tmgrid { grid-template-columns: repeat(2, 1fr); } .ecm-tmline { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .ecm-tmgrid { grid-template-columns: 1fr; } .ecm-tmline { grid-template-columns: 1fr; } }

/* ---- Flux digital icons — cci style: flat blue glyph, no navy tile ---- */
.egov-page .flow-extras .fx-ic { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; display: inline-flex; }
.egov-page .flow-extras .fx-ic i { font-size: 26px; color: #0660a2; }

/* ---- Versiuni & suport — PostgreSQL-style version support table ---- */
.ecm-reltable { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff; box-shadow: var(--shadow-s); }
.ecm-reltable__head, .ecm-relrow { display: grid; grid-template-columns: 1.5fr .8fr 1fr 1fr 2.2fr; gap: 16px; padding: 14px 20px; align-items: center; }
.ecm-reltable__head { background: var(--navy-700); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ecm-relrow { border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.ecm-relrow.is-latest { background: #f3f7ff; }
.ecm-relver { font-weight: 700; color: var(--navy-700); }
.ecm-relver em { font-style: normal; color: var(--azure); font-size: 12px; font-weight: 700; }
.ecm-relnote { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ecm-relbadge { display: inline-block; padding: 3px 11px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.ecm-relbadge--stable { background: #e8f6ee; color: #16a34a; border: 1px solid #bfe6cd; }
.ecm-relbadge--active { background: #e8f0ff; color: #2f6bff; border: 1px solid #cfe0ff; }
.ecm-relbadge--eol { background: #f1f2f5; color: #6b7280; border: 1px solid #e0e2e8; }
.ecm-rel__foot { margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ecm-rel__foot a { color: var(--azure); font-weight: 600; }
@media (max-width: 760px) {
  .ecm-reltable__head { display: none; }
  .ecm-relrow { grid-template-columns: 1fr; gap: 7px; padding: 16px 18px; }
  .ecm-relrow > span[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: var(--steel); font-size: 12px; }
}

/* ---- Tech / source-control note under the EUIPO band ---- */
.ecm-tmnote { margin-top: 22px; padding: 16px 18px; background: var(--paper-2); border-left: 3px solid var(--azure); border-radius: 0 5px 5px 0; color: var(--ink); font-size: 14px; line-height: 1.65; }
.ecm-tmnote i { color: var(--azure); margin-right: 6px; }
.ecm-tmnote a { color: var(--azure); font-weight: 600; }

/* "Versiuni & suport" as a full-width white band (like the EUIPO band). */
.ecm-rel { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Version timeline (moved from doc.css) ---- */
/* ---- Version timeline ---- */
.ecm-timeline { position: relative; max-width: 920px; margin: 0 auto; padding-left: 30px; }
.ecm-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.ecm-tl { position: relative; margin-bottom: 28px; }
.ecm-tl:last-child { margin-bottom: 0; }
.ecm-tl::before { content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--azure); box-shadow: 0 0 0 4px rgba(47,107,255,.15); }
.ecm-tl__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ecm-ver { font-family: "Inter Tight", Inter, sans-serif; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--azure), var(--navy-700)); padding: 4px 14px; border-radius: 999px; }
.ecm-tl__date { color: var(--muted); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ecm-tl__date i { color: var(--azure); }
.ecm-tl__tag { color: var(--azure); font-weight: 700; font-size: 13px; }
.ecm-tl__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-s); }
.ecm-tl__card > p { color: var(--ink); margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.ecm-tl__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ecm-tl__cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--steel); margin: 0 0 9px; }
.ecm-tl__cols ul { margin: 0; padding-left: 18px; }
.ecm-tl__cols li { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
@media (max-width: 640px) { .ecm-tl__cols { grid-template-columns: 1fr; gap: 14px; } }

/* ---- Backlog board (moved from doc.css) ---- */
/* ---- Backlog (dark section) ---- */
.ecm-dark { background: linear-gradient(135deg, #0a2648 0%, #01255C 100%); color: #fff; }
.ecm-dark .eyebrow { color: #8fb0e6; }
.ecm-backlog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ecm-bl { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; }
.ecm-bl i { font-size: 26px; color: var(--azure-2); }
.ecm-bl h3 { font-size: 16px; margin: 12px 0 6px; color: #fff; }
.ecm-bl p { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.5; margin: 0; }
.ecm-dark__cta { text-align: center; margin-top: 32px; }
@media (max-width: 900px) { .ecm-backlog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ecm-backlog { grid-template-columns: 1fr; } }

/* ---- Roadmap (moved from doc.css) ---- */
/* ---- Roadmap ---- */
.ecm-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ecm-rm { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-s); }
.ecm-rm__phase { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--azure); background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.2); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.ecm-rm ul { margin: 0; padding-left: 18px; }
.ecm-rm li { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
@media (max-width: 900px) { .ecm-roadmap { grid-template-columns: 1fr; } }

/* Remove the light-blue gap under the hero: the panel's bottom margin was
   collapsing out of the white band (padding-bottom:0), exposing the page bg. */
.egov-page .vogo-gov-hero-band { padding-bottom: 34px; }
.egov-page .vogo-gov-hero { margin-bottom: 0; }

/* ---- Modal "Certificări AI & tehnologie" category icons — cci flat blue ---- */
.egov-page .ai-cat-ic { width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; }
.egov-page .ai-cat-ic i { font-size: 24px; color: #0660a2; }

/* AI modal: provider dots in cci flat blue (D). */
.egov-page .llm-prov-h .llm-dot { background: #0660a2; }

/* E2: version badges (v1.0/v2.0/v3.0) in flat vogo cci, 5px corners. */
.egov-page .ecm-ver { background: #0660a2; border-radius: 5px; }
/* E2: merged history lead (no eyebrow/h2). */
.egov-page .ecm-hist-head { margin-top: 52px; }
/* E4: per-version download + documentation buttons. */
.ecm-tl__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ecm-tl__btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 5px; text-decoration: none; background: #0660a2; color: #fff; border: 1px solid #0660a2; transition: filter .15s ease; }
.ecm-tl__btn .bi { font-size: 14px; }
.ecm-tl__btn--ghost { background: #fff; color: #0660a2; }
.ecm-tl__btn:hover { filter: brightness(1.06); }

/* D: provider markers as cci flat glyph icons (matches category icon style). */
.egov-page .llm-prov-h .llm-ic { color: #0660a2; font-size: 17px; line-height: 1; flex-shrink: 0; }

/* ===================== VOGO eBS ECM Registratura (secțiunea de la finalul paginii) =====================
   Subtitlurile, notele și bara de acțiuni ale secțiunii #registratura. Grila celor 20 de registre
   refolosește .ecm-tmgrid, iar cardurile refolosesc .cards/.card — aici stă doar ce e specific. */
/* Prefixul .egov-page e obligatoriu pe toate regulile cu margini de aici. Regulile generice de
   la începutul fișierului — `.egov-page h1..h4 { margin: 0 }` și `.egov-page p { margin: 0 }` —
   au specificitate mai mare decât o singură clasă, deci fără prefix marginea nu se aplică. */
.egov-page .ecm-reg__sub { font-family: "Inter Tight", Inter, sans-serif; font-size: 18px; color: var(--navy-700); display: block; clear: both; margin: 76px 0 18px; }
.egov-page .ecm-reg__note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 18px 0 0; }
.egov-page .ecm-reg__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.egov-page .ecm-reg__meta { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 560px) { .egov-page .ecm-reg__sub { margin-top: 40px; font-size: 17px; } }

/* Figura din secțiunea GateScanner. Prefix .egov-page, ca toate regulile cu margini de aici. */
.egov-page .ecm-gs__figure { margin: 34px 0 8px; }
.egov-page .ecm-gs__figure img { width: 100%; height: auto; max-width: 780px; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow-s); }

/* ===================== Reperele din banda hero, ca legături =====================
   Fiecare pătrățel din bandă este o legătură către pagina capabilității din /ecm/all-cards/.
   Regulile de aici îi păstrează aspectul de dinainte: fără subliniere și cu aceeași culoare de
   text, inclusiv în starea :visited, unde regula implicită a browserului ar învinge altfel
   clasa. Prefixul .egov-page respectă convenția fișierului. */
.egov-page a.vogo-gov-hero__strip-item,
.egov-page a.vogo-gov-hero__strip-item:link,
.egov-page a.vogo-gov-hero__strip-item:visited,
.egov-page a.vogo-gov-hero__strip-item:hover,
.egov-page a.vogo-gov-hero__strip-item:focus {
  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
/* Stare de hover discretă: bordura se luminează puțin, fundalul cu o idee. */
.egov-page a.vogo-gov-hero__strip-item:hover {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
}
.egov-page a.vogo-gov-hero__strip-item:focus-visible {
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}

/* ===================== Conectori între reperele din banda hero =====================
   Liniile se desenează în spațiul de 12px dintre pătrățele: ::after spre dreapta, ::before în jos.
   Se ascund acolo unde ar ieși în gol — ultima coloană și ultimul rând — separat pentru grila de
   4 coloane și pentru cea de 2 coloane de sub 860px. */
.egov-page .vogo-gov-hero__strip-item { position: relative; }
.egov-page .vogo-gov-hero__strip-item::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 12px; height: 1px;
  background: rgba(255,255,255,.32);
  pointer-events: none;
}
.egov-page .vogo-gov-hero__strip-item::before {
  content: ""; position: absolute; top: 100%; left: 50%; height: 12px; width: 1px;
  background: rgba(255,255,255,.32);
  pointer-events: none;
}
/* Grila implicită, 4 coloane. */
.egov-page .vogo-gov-hero__strip-item:nth-child(4n)::after { content: none; }
.egov-page .vogo-gov-hero__strip-item:nth-last-child(-n+4)::before { content: none; }

@media (max-width: 860px) {
  /* Grila trece la 2 coloane: se readuc conectorii ascunși mai sus și se ascund cei de pe noua margine. */
  .egov-page .vogo-gov-hero__strip-item:nth-child(4n)::after { content: ""; }
  .egov-page .vogo-gov-hero__strip-item:nth-last-child(-n+4)::before { content: ""; }
  .egov-page .vogo-gov-hero__strip-item:nth-child(2n)::after { content: none; }
  .egov-page .vogo-gov-hero__strip-item:nth-last-child(-n+2)::before { content: none; }
}

/* ===================== Paginile de capabilitate din /ecm/all-cards/ =====================
   Toate regulile cu margini poartă prefixul .egov-page: regulile de bază de la începutul
   fișierului pun margin:0 pe h1..h4 și pe p, iar o singură clasă nu le depășește. */
.egov-page .ac-page { background: var(--paper); }
.egov-page .ac-hero { background: linear-gradient(135deg, #0C2F59 0%, #0a2648 55%, #01255C 100%); color: #fff; padding: 44px 0 52px; }
.egov-page .ac-crumbs { font-size: 12.5px; color: rgba(255,255,255,.72); margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.egov-page .ac-crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.egov-page .ac-crumbs a:hover { text-decoration: underline; }
.egov-page .ac-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #8fc4ee; margin: 0 0 12px; }
.egov-page .ac-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; color: #fff; margin: 0 0 16px; }
.egov-page .ac-lead { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 62ch; margin: 0 0 30px; }
.egov-page .ac-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.egov-page .ac-body { padding: 48px 0 64px; }
.egov-page .ac-section { max-width: 76ch; margin: 0 0 44px; }
.egov-page .ac-section h2 { font-size: 1.35rem; color: var(--navy-700); margin: 0 0 14px; }
.egov-page .ac-section p { color: var(--ink); font-size: 16px; line-height: 1.62; margin: 0 0 14px; }
.egov-page .ac-list { margin: 6px 0 0; padding: 0 0 0 20px; }
.egov-page .ac-list li { color: var(--ink); font-size: 15.5px; line-height: 1.55; margin: 0 0 8px; }

.egov-page .ac-faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 14px 16px; margin: 0 0 10px; }
.egov-page .ac-faq summary { cursor: pointer; font-weight: 600; color: var(--navy-700); font-size: 15.5px; }
.egov-page .ac-faq details p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

.egov-page .ac-final { max-width: none; padding: 26px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.egov-page .ac-final h2 { margin: 0 0 10px; }
.egov-page .ac-final p { margin: 0 0 18px; }

.egov-page .ac-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.egov-page .ac-related__item { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.egov-page .ac-related__item:hover { border-color: #c7d3ee; transform: translateY(-2px); }
.egov-page .ac-related__item > i { font-size: 20px; color: var(--azure); flex-shrink: 0; }
.egov-page .ac-related__item strong { display: block; color: var(--navy-700); font-size: 14.5px; margin: 0 0 3px; }
.egov-page .ac-related__item span span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.egov-page .ac-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 36px; }
.egov-page .ac-index__item { display: flex; gap: 14px; align-items: flex-start; padding: 17px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.egov-page .ac-index__item:hover { border-color: #c7d3ee; transform: translateY(-2px); }
.egov-page .ac-index__item > i { font-size: 22px; color: var(--azure); flex-shrink: 0; }
.egov-page .ac-index__item strong { display: block; color: var(--navy-700); font-size: 15.5px; margin: 0 0 4px; }
.egov-page .ac-index__item span span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.egov-page .ac-back { margin: 8px 0 0; font-size: 14.5px; }
.egov-page .ac-back a { color: var(--azure); text-decoration: none; }
.egov-page .ac-back a:hover { text-decoration: underline; }

@media (max-width: 900px) { .egov-page .ac-related { grid-template-columns: 1fr; } .egov-page .ac-index { grid-template-columns: 1fr; } }

    /* ---- The shared look, on this page (24.09.2026) ----
       The page moved from /ecm/ to /ro/ecm/ and took the hero of /ro/e-reg/. The
       scene behind it is the photograph /ro/ uses, so the pages open alike. */
    body.vogo-pk.egov-page { --pk-scene: url('https://vogo.me/ro/img/bk-image-hero.webp'); }
    /* The hero carries the whole strip of capability cards, so it is given the
       whole container instead of the 640px measure of the shared rule. */
    body.vogo-pk .pk-hero__inner--wide { max-width: none; }
    /* The strip keeps the look it had on the old hero. */
    body.vogo-pk .pk-hero .vogo-gov-hero__strip { margin-top: 26px; }

    /* ---- The capability strip, now a band of its own (24.09.2026) ----
       Inside the hero it was white-on-dark; on the light band it takes ink, keeps
       the same grid and the same card shape. */
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip {
      margin: 0;
      background: transparent;
      border: 0;
      padding: 0;
    }
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-item {
      background: #fff;
      border: 1px solid var(--pk-line, #d7dbe1);
      border-radius: 12px;
      padding: 16px 18px;
      align-items: flex-start;
      color: var(--pk-ink, #111317);
      text-decoration: none;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-item:hover {
      border-color: var(--pk-ember, #E4812F);
      box-shadow: 0 12px 28px -20px rgba(7,23,58,.45);
      transform: translateY(-2px);
    }
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-icon {
      background: var(--pk-abyss, #001120);
      border-color: transparent;
      color: #fff;
    }
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-text strong { color: var(--pk-abyss, #001120); }
    body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-text span { color: var(--pk-muted, #4d5562); }

/* ===================== The look of the /ro/ home page (27.09.2026) ===================== */

/* Menu: the home page's scrolled look, permanently. The shared vogo-pk.css keeps the
   header fixed and transparent at the top; here it is always filled, the top band clear. */
body.vogo-pk.egov-page .vogo-header {
  background:
    linear-gradient(90deg, rgba(0,17,32,.94) 0%, rgba(0,17,32,.78) 42%, rgba(0,17,32,.34) 70%, rgba(0,17,32,.24) 100%),
    url('/ro/img/bk-image-hero.webp') center top / cover no-repeat fixed,
    #001120;
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}

/* general/index.css pads the body for a fixed logo band this page does not have. */
body.vogo-pk.egov-page { padding-bottom: 0; }

/* Wide blue band: the background of .ro-ecm .section.ecm-blue-band, for this page's own sections. */
.egov-page .section.ecm-blue-band {
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.06), transparent 45%),
              linear-gradient(135deg, #001120 0%, #04203c 55%, #001120 100%);
  border-top: 1px solid rgba(228,129,47,.22);
}
.egov-page .section.ecm-blue-band--sub { padding: 52px 0 58px; }
.egov-page .ecm-blue-band .section-head h2,
.egov-page .ecm-blue-band .ecm-reg__sub { color: #fff; }
/* The band opens with its subtitle: no top gap of its own. */
.egov-page .ecm-blue-band .ecm-reg__sub { margin-top: 0; }
.egov-page .ecm-blue-band .section-head p,
.egov-page .ecm-blue-band .ecm-reg__note { color: rgba(255,255,255,.72); }
.egov-page .ecm-blue-band .eyebrow { color: rgba(255,255,255,.72); }
.egov-page .ecm-blue-band .eyebrow::before { background: #E4812F; }
/* Cards on the band: translucent, no shadow, orange border on hover. */
.egov-page .ecm-blue-band .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  box-shadow: none;
}
.egov-page .ecm-blue-band .card:hover { border-color: rgba(228,129,47,.55); background: rgba(255,255,255,.08); box-shadow: none; }
.egov-page .ecm-blue-band .card h3 { color: #fff; }
.egov-page .ecm-blue-band .card > p { color: rgba(255,255,255,.72); }
/* The watermark icons of #identitate carry an id selector: the id is needed to reach them. */
.egov-page #identitate.ecm-blue-band .card-ic i { color: #E4812F; }
/* Facts grid (registers, specifications) on the band. */
.egov-page .ecm-blue-band .ecm-tmgrid > div { border-top-color: rgba(255,255,255,.13); }
.egov-page .ecm-blue-band .ecm-tmgrid b { color: #E4812F; }
.egov-page .ecm-blue-band .ecm-tmgrid span { color: rgba(255,255,255,.86); }
/* The section that continues after a band starts with its subtitle. */
.egov-page .ecm-reg__sub.ecm-reg__sub--first { margin-top: 0; }

/* Footer as on /ro/: the #001120 dark of the hero, white logo text, translucent white text and
   links with the orange on hover. The footer comes from general/styles.css (whole site): scoped here. */
body.vogo-pk.egov-page .site-footer,
body.vogo-pk.egov-page .site-footer.vogo-footer { background: #001120; }
body.vogo-pk.egov-page .site-footer .logo img { width: auto; height: 42px; }
body.vogo-pk.egov-page .site-footer .logo span { color: #fff; }
body.vogo-pk.egov-page .site-footer h4 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
body.vogo-pk.egov-page .site-footer,
body.vogo-pk.egov-page .site-footer p { color: rgba(255,255,255,.72); }
body.vogo-pk.egov-page .site-footer a { color: rgba(255,255,255,.72); transition: color .2s ease; }
body.vogo-pk.egov-page .site-footer a:hover { color: #E4812F; }
body.vogo-pk.egov-page .site-footer .vf-bottom { border-top-color: rgba(255,255,255,.12); }
body.vogo-pk.egov-page .site-footer .vf-social a { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.72); }
body.vogo-pk.egov-page .site-footer .vf-social a:hover { border-color: #E4812F; color: #E4812F; }

/* ---- Provenance seal in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css, scoped there under .ro-ecm) and re-scoped to
   this page's hero; the class names stay vogo-gov-hero__seal* so the look matches.
   A hairline roundel ("MADE IN EUROPE" on the arc, the 12 EU stars in the orange, the
   registered sign at the centre) and a small plaque with the EUIPO record number, on
   a dark translucent glass that stays legible over the hero photograph.
   Placement: in the flow under the hero lead (the EU badges were removed on
   27.09.2026), same left edge; the hero's own bottom padding gives the gap to its
   lower edge. The lead's shared 28px bottom margin is zeroed in the hero so the
   seal's top margin alone sets the lead-to-seal gap (no margin collapsing):
   26px, 18px on phones. (The suite links row sat between them for a few hours on
   27.09.2026; it is now the first row of the hero.) */
body.vogo-pk .pk-hero .pk-lead { margin-bottom: 0; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal,
body.vogo-pk .pk-hero .vogo-gov-hero__seal:link,
body.vogo-pk .pk-hero .vogo-gov-hero__seal:visited {
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 100%;
  margin: 26px 0 0; padding: 7px 14px 7px 7px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  background: rgba(0,17,32,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
body.vogo-pk .pk-hero .vogo-gov-hero__seal:hover { border-color: rgba(228,129,47,.7); background: rgba(0,17,32,.46); }
body.vogo-pk .pk-hero .vogo-gov-hero__seal:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }

/* The roundel: stroke-only rings, arc lettering in translucent white. */
body.vogo-pk .pk-hero .vogo-gov-hero__seal-mark { width: 64px; height: 64px; flex: 0 0 64px; display: block; overflow: visible; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: .8; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-ring--inner { stroke: rgba(255,255,255,.26); stroke-width: .6; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-arc { fill: rgba(255,255,255,.88); font-family: "Inter Tight", "Inter", sans-serif; font-size: 7.6px; font-weight: 700; letter-spacing: 1.5px; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-arc--low { fill: rgba(255,255,255,.58); font-weight: 600; letter-spacing: 1.2px; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-reg { fill: #fff; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }

/* The only motion: the 12 stars come in one after another, once, on load.
   The orange is this page's accent token (--pk-ember, the same #E4812F). */
body.vogo-pk .pk-hero .vogo-gov-hero__seal-star {
  fill: var(--pk-ember); opacity: .85;
  transform-box: fill-box; transform-origin: center;
  animation: vogoSealStarIn .5s var(--ease) both;
  animation-delay: calc(.5s + var(--i) * 70ms);
  transition: opacity .25s var(--ease);
}
body.vogo-pk .pk-hero .vogo-gov-hero__seal:hover .vogo-gov-hero__seal-star { opacity: 1; }
@keyframes vogoSealStarIn {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: .85; transform: none; }
}

/* The plaque: a hairline divider, "EUIPO" on the first line, the record number under it. */
body.vogo-pk .pk-hero .vogo-gov-hero__seal-text { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); line-height: 1.15; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-name { white-space: nowrap; font-family: "Inter Tight", "Inter", sans-serif; font-size: 13px; font-weight: 700; color: #fff; }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }
body.vogo-pk .pk-hero .vogo-gov-hero__seal-num i { font-size: 11px; color: var(--pk-ember); }

/* Phone: a tighter gap under the lead and a smaller roundel. */
@media (max-width: 600px) {
  body.vogo-pk .pk-hero .vogo-gov-hero__seal,
  body.vogo-pk .pk-hero .vogo-gov-hero__seal:link,
  body.vogo-pk .pk-hero .vogo-gov-hero__seal:visited { margin: 18px 0 0; gap: 10px; padding: 6px 12px 6px 6px; }
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-mark { width: 52px; height: 52px; flex-basis: 52px; }
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-text { padding-left: 10px; }
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-name { font-size: 12.5px; }
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-num { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-star { animation: none; }
  body.vogo-pk .pk-hero .vogo-gov-hero__seal,
  body.vogo-pk .pk-hero .vogo-gov-hero__seal-star { transition: none; }
}

/* ---- Suite links in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css: the base .ecm-aiao__links rules and the
   hero variant, scoped there under .ro-ecm) and re-scoped to this page's hero; the
   class names stay the same. Small light text on the dark hero, thin outline,
   translucent white icons (full white on hover/focus), orange text and border on
   hover. First row of the hero content, above the kicker and the title, 20px above
   the kicker (phones too), as on /ro/e-gov/ and /ro/e-biz/. The link of this page
   (ECM) is marked .is-current and drawn a bit stronger. */
body.vogo-pk .pk-hero .ecm-aiao__links--hero { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
body.vogo-pk .pk-hero .ecm-aiao__links--hero a,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:link,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:visited {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22); background: transparent;
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
body.vogo-pk .pk-hero .ecm-aiao__links--hero a i { color: rgba(255,255,255,.72); font-size: 13px; }
/* The link of the page you are on: stronger text and border. */
body.vogo-pk .pk-hero .ecm-aiao__links--hero a.is-current,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a.is-current:link,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a.is-current:visited {
  color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.45);
}
/* Icons only: full white on hover/focus; the text and border take the orange hover. */
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:hover i,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:focus-visible i { color: #fff; }
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:hover,
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:focus-visible {
  border-color: var(--pk-ember); color: var(--pk-ember); background: transparent;
}
body.vogo-pk .pk-hero .ecm-aiao__links--hero a:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
/* Phone: tighter pills; the 20px gap to the kicker stays. */
@media (max-width: 600px) {
  body.vogo-pk .pk-hero .ecm-aiao__links--hero { gap: 6px; margin: 20px 0 0; }
  body.vogo-pk .pk-hero .ecm-aiao__links--hero a,
  body.vogo-pk .pk-hero .ecm-aiao__links--hero a:link,
  body.vogo-pk .pk-hero .ecm-aiao__links--hero a:visited { padding: 6px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.vogo-pk .pk-hero .ecm-aiao__links--hero a { transition: none; }
}

/* ---- Hero top spacing (27.09.2026) ----
   general/vogo-pk.css gives every product hero
   padding-top: calc(clamp(56px, 9vw, 104px) + var(--vh-h, 57px)).
   On this page the first hero row is the small suite-links row, so that gap read as
   empty space under the fixed header. Only the top is reduced (about 32px under the
   header on desktop, 20px on phones); the header height is still included so the row
   never slides under .vogo-header. The bottom padding stays as in vogo-pk.css. */
body.vogo-pk.egov-page .pk-hero .pk-hero__inner {
  padding-top: calc(clamp(20px, 2.6vw, 32px) + var(--vh-h, 57px));
}

/* ---- Hero buttons (27.09.2026) ----
   "Solicită un demo / Vezi demo / Login" under the hero lead, styled as the /ro/ and /ro/e-gov/ hero buttons:
   transparent pill, white text and icon, thin white border, icon after the label. */
body.egov-page .pk-hero .pk-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; }
body.egov-page .pk-hero .pk-hero-actions .egov-cta-btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.75);
  padding: 16px 30px; border-radius: 999px; font-size: 1rem; box-shadow: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
body.egov-page .pk-hero .pk-hero-actions .egov-cta-btn:hover,
body.egov-page .pk-hero .pk-hero-actions .egov-cta-btn:focus-visible {
  background: rgba(255,255,255,.12); color: #fff; border-color: #fff; transform: none; box-shadow: none;
}
body.egov-page .pk-hero .pk-hero-actions .egov-cta-btn i { color: #fff; }
@media (max-width: 600px) {
  body.egov-page .pk-hero .pk-hero-actions { gap: 10px; margin: 0 0 16px; }
  body.egov-page .pk-hero .pk-hero-actions .egov-cta-btn { width: 100%; justify-content: center; }
}

/* ---- The 32 capability cards: icons in the VOGO icons style (27.09.2026) ----
   Model: C:\VOGO\images\modele\vogo-icons-style.png — flat outline glyphs in one saturated blue,
   no tile, no gradient, no shadow (the dark tile with a white glyph goes). */
body.vogo-pk .pk-strip-band { --vogo-icon-blue: #0F6CBD; }
body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-icon {
  width: 28px; height: 28px; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--vogo-icon-blue);
}
body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-icon i { font-size: 22px; color: var(--vogo-icon-blue); }
body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }

/* ---- Phones and the hero buttons (27.09.2026) ----
   The lead has no bottom margin (it was set for the seal); the buttons that now follow it keep 24px.
   On phones (≤600px) the 32 capability cards go one per row (two narrow columns broke the text after
   one or two words), descriptions at 13px, and the connector lines follow the single column. */
body.vogo-pk .pk-hero .pk-lead + .pk-hero-actions { margin-top: 24px; }
@media (max-width: 600px) {
  body.vogo-pk .pk-hero .pk-lead + .pk-hero-actions { margin-top: 18px; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip { grid-template-columns: 1fr; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-item::after { content: none; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-item::before { content: ""; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-item:last-child::before { content: none; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-text strong { font-size: 14px; }
  body.vogo-pk .pk-strip-band .vogo-gov-hero__strip-text span { font-size: 13px; line-height: 1.45; }
  body.egov-page .pk-hero .ecm-aiao__links--hero a { min-height: 36px; padding: 8px 12px; }
}