/*
  File role: e-gov.vogo.me page styles (extracted from index.php inline <style>).
  Page-specific CSS per project asset-separation rule (.claude/knowledge-base/rag-general.md).
  Institutional navy sub-brand tokens are defined ONCE in :root below; global
  colors/fonts come from general/styles.css (linked before this file).
  @file_version 1.1.18
*/
    /* =========================================================
     * 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);
      --ember:    #E4812F;   /* the orange accent of /ro/ (blue bands, footer hover) */
    }

    /* ---- 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;
    }

    /* The scene the shared look puts behind the hero and behind the filled menu:
       the same photograph /ro/ uses, so the two pages open alike. */
    body.vogo-pk.egov-page { --pk-scene: url('https://vogo.me/ro/img/bk-image-hero.webp'); }
    /* This page's hero carries a long lead and a strip of four, 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; }
    body.vogo-pk .pk-lead--wide { max-width: 104ch; text-align: justify; hyphens: auto; }

    /* 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. */
    .vogo-gov-hero-band { background: #fff; padding: 35px 10px 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%);
      color: #fff; padding: 40px 36px 48px; border-radius: 0 0 12px 12px; max-width: 1104px; margin: 0 auto 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; }
    .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 28px; }
    .vogo-gov-hero__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
    .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; }
    .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; }
    .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; } }

    /* ===== 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; }
    /* Intro highlights in the orange of /ro/ (was --ink navy), as the home page intro. */
    .egov-intro p strong { color: var(--ember); }

    /* ---- 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)); }

    /* ---- Contact section (27.09.2026) ----
       section#contact is a blue band (.egov-blue-band) laid out as section#contact of /ro/
       (ro/ecm-sections.css: .ro-ecm .ecm-contact / .ecm-field and their blue-band overrides):
       centred head, form 880px, two columns of labelled fields, message full width,
       footer row = submit + outlined secondary actions, status on its own row.
       The status line keeps its .edf-status / .ok / .err classes: e-gov.js sets them. */
    body.egov-page #contact { scroll-margin-top: calc(var(--vh-h, 57px) + 14px); }
    /* Fine translucent white grid behind the contact band, restored from the old .cta panel
       (.cta::before, e-gov.css 1.1.13 and earlier): 44px lines at 5% white, faded out from the
       top centre by a radial mask. The mask is relative to the box, so it scales with the
       full-width band. Kept on phones, as before. Content sits above it. */
    body.egov-page #contact.egov-blue-band::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      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%);
    }
    body.egov-page #contact.egov-blue-band > .egov-container { position: relative; z-index: 1; }
    body.egov-page .egov-contact { max-width: 880px; margin: 0 auto; border-radius: 7px; }
    body.egov-page .egov-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    body.egov-page .egov-field { display: flex; flex-direction: column; gap: 7px; }
    body.egov-page .egov-field--wide { grid-column: 1 / -1; }
    body.egov-page .egov-field > span { font-size: .82rem; font-weight: 700; color: #fff; }
    body.egov-page .egov-field > span i { font-style: normal; color: var(--ember); }
    body.egov-page .egov-field input,
    body.egov-page .egov-field textarea {
      width: 100%; box-sizing: border-box; padding: 13px 15px; font: inherit;
      color: #fff; background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }
    body.egov-page .egov-field textarea { resize: vertical; min-height: 110px; }
    body.egov-page .egov-field textarea::placeholder { color: rgba(255,255,255,.45); }
    body.egov-page .egov-field input:focus,
    body.egov-page .egov-field textarea:focus {
      outline: none; background: rgba(255,255,255,.09); border-color: var(--ember);
      box-shadow: 0 0 0 3px rgba(228,129,47,.16);
    }
    /* Consent checkboxes, as .ro-ecm .ecm-consent + its blue-band override in ro/ecm-sections.css. */
    body.egov-page .egov-consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; font-size: .9rem; color: rgba(255,255,255,.72); cursor: pointer; }
    body.egov-page .egov-consent input { margin-top: 3px; accent-color: var(--ember); }
    body.egov-page .egov-consent i { font-style: normal; color: var(--ember); }
    body.egov-page .egov-consent + .egov-consent { margin-top: 10px; }
    body.egov-page .egov-contact__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
    /* Submit = orange primary (same geometry as .egov-cta-btn: 5px radius, 14px 26px, 700),
       filled with --ember, white text and icon; lifts on hover. Id-scoped so it beats
       .egov-cta-btn--primary (navy) without touching the other primary buttons. */
    body.egov-page #egovDemoSubmit.egov-cta-btn {
      color: #fff; background: var(--ember); border-radius: 5px;
      box-shadow: 0 12px 28px -12px rgba(228,129,47,.7);
    }
    body.egov-page #egovDemoSubmit.egov-cta-btn:hover,
    body.egov-page #egovDemoSubmit.egov-cta-btn:focus-visible {
      color: #fff; background: var(--ember); transform: translateY(-2px);
      box-shadow: 0 18px 36px -12px rgba(228,129,47,.85);
    }
    body.egov-page #egovDemoSubmit.egov-cta-btn:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
    body.egov-page #egovDemoSubmit.egov-cta-btn i { color: #fff; }
    /* Secondary actions: transparent, thin light outline, orange icon; orange outline on hover. */
    body.egov-page .egov-contact__alt {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 13px 20px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
      font-family: inherit; font-size: .92rem; font-weight: 700; line-height: 1.1;
      text-decoration: none; white-space: nowrap;
      transition: background .2s var(--ease), border-color .2s var(--ease);
    }
    body.egov-page .egov-contact__alt:hover,
    body.egov-page .egov-contact__alt:focus-visible { background: rgba(255,255,255,.08); border-color: rgba(228,129,47,.7); color: #fff; }
    body.egov-page .egov-contact__alt i { font-size: 1.05rem; color: var(--ember); }
    /* The status goes on its own row, under the buttons. */
    body.egov-page .egov-contact__foot .edf-status { flex: 1 0 100%; margin: 0; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.72); }
    body.egov-page .egov-contact__foot .edf-status.ok { color: #4ade80; }
    body.egov-page .egov-contact__foot .edf-status.err { color: #ff6b7a; }
    /* States set by e-gov.js: sending (submit dimmed) and flash (after the demo button). */
    .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(228,129,47,.55); } }
    @media (max-width: 720px) { body.egov-page .egov-contact__grid { 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; }

    /* ---- Action buttons + info modals (AI certifications / services popups) ---- */
    /* 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); }
      .wstep:not(:last-child)::after { display: none; }
    }

    /* On a phone the justified lead opens rivers between the words, because the
       measure is short and the words are long. It stays justified from tablet up,
       where it reads as it does on the model page. */
    @media (max-width: 720px) {
      body.vogo-pk .pk-lead--wide { text-align: left; hyphens: manual; }
    }

/* ---- Wide blue bands as on /ro/ (27.09.2026) ----
   Same background as .ro-ecm .section.ecm-blue-band in ro/ecm-sections.css; that file is
   scoped to .ro-ecm, so the look is repeated here for this page only. */
body.egov-page .egov-blue-band {
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.06), transparent 45%),
              linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  border-top: 1px solid rgba(228,129,47,.22);
  color: #fff;
}
/* The group wrapper carries the band; its dark sections let it show through, so no seams. */
body.egov-page .egov-blue-band--group .section.dark { background: transparent; }
/* Bands inside a group lose their own background and border, and a second section starts without
   its top padding, so the group reads as one band (Identitate + WCAG/AI, 27.09.2026). */
body.egov-page .egov-blue-band--group > .egov-blue-band { background: transparent; border-top: 0; }
body.egov-page .egov-blue-band--group > .section + .section { padding-top: 0; }

/* Headings white, body text translucent white, eyebrow dash in the orange */
body.egov-page .egov-blue-band .section-head h2 { color: #fff; }
body.egov-page .egov-blue-band .section-head p { color: rgba(255,255,255,.72); }
body.egov-page .egov-blue-band .eyebrow { color: rgba(255,255,255,.72); }
body.egov-page .egov-blue-band .eyebrow::before { background: var(--ember); }

/* Cards translucent, no shadow; orange outline on hover as on /ro/ */
body.egov-page .egov-blue-band .card,
body.egov-page .egov-blue-band .sec-badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  box-shadow: none;
}
body.egov-page .egov-blue-band .card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(228,129,47,.55);
  box-shadow: none;
}
body.egov-page .egov-blue-band .card h3 { color: #fff; }
body.egov-page .egov-blue-band .card > p { color: rgba(255,255,255,.78); }
body.egov-page .egov-blue-band .card ul li { color: rgba(255,255,255,.82); }

/* Icons in the orange: translucent orange tiles, like .fx-ic on the /ro/ bands */
body.egov-page .egov-blue-band .card-ic,
body.egov-page .egov-blue-band .flow-extras .fx-ic,
body.egov-page .egov-blue-band .sec-item .si-ic {
  background: rgba(228,129,47,.13);
  border: 1px solid rgba(228,129,47,.40);
  box-shadow: none;
}
body.egov-page .egov-blue-band .card-ic i,
body.egov-page .egov-blue-band .card ul li i,
body.egov-page .egov-blue-band .flow-extras .fx-ic i,
body.egov-page .egov-blue-band .sec-item .si-ic i { color: var(--ember); }
body.egov-page .egov-blue-band .integr-k .dot { background: var(--ember); }
/* Identitate keeps its watermark icons (no tile), only turned orange, as on /ro/ */
body.egov-page #identitate.egov-blue-band .card-ic { border: 0; }
body.egov-page #identitate.egov-blue-band .card-ic i { color: var(--ember); }

body.egov-page .egov-blue-band .flow-extras b,
body.egov-page .egov-blue-band .sec-item b { color: #fff; }
body.egov-page .egov-blue-band .flow-extras span,
body.egov-page .egov-blue-band .sec-item span { color: rgba(255,255,255,.72); }

/* ---- Portal section as a blue band (27.09.2026) ----
   section#portal carries .egov-blue-band (rules above). Here only what that band does
   not cover for this section's inner elements:
   - the icon tiles: the older "#portal .card-ic" navy gradient outranks the band rule
     by its id, so the orange tile is restated with the id in the chain;
   - bold words in the lists in full white;
   - the services-modal button as the hero buttons: transparent pill, white border/text.
   #portal and #identitate are adjacent bands; each keeps its orange top border, which
   marks the seam. Both keep the standard .section padding (92px / 64px on phones),
   the same rhythm as between any two sections of the page. */
body.egov-page #portal.egov-blue-band .card-ic {
  background: rgba(228,129,47,.13);
  border: 1px solid rgba(228,129,47,.40);
  box-shadow: none;
}
body.egov-page #portal.egov-blue-band .card ul li strong { color: #fff; }
body.egov-page #portal.egov-blue-band .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 #portal.egov-blue-band .egov-cta-btn:hover,
body.egov-page #portal.egov-blue-band .egov-cta-btn:focus-visible {
  background: rgba(255,255,255,.12); color: #fff; border-color: #fff; transform: none; box-shadow: none;
}
body.egov-page #portal.egov-blue-band .egov-cta-btn:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
body.egov-page #portal.egov-blue-band .egov-cta-btn i { color: #fff; }
body.egov-page #portal.egov-blue-band a:not(.egov-cta-btn) { color: var(--ember); }

/* ---- Backend section on white (27.09.2026) ----
   section#backend ("Administrare & backend / VOGO eBS Services"): the page's modern
   look on pure white, between the blue bands. Scoped by the section id only.
   - pure #fff (not the grey --paper), thin top hairline against the neighbours;
   - eyebrow in muted ink with the orange dash (--ember), h2/h3 in #001120, lead muted;
   - cards: white, hairline border, 7px radius, no heavy shadow, no tricolor side bar;
     hover changes only the border to orange (no lift);
   - icon tiles: translucent orange with an orange hairline, 7px, icons in --ember.
   Responsive grid rules (.cards.c3 at 980px / 720px) are untouched. */
/* Section frame and head shared by the white sections: #backend, #securitate, #industrii. */
body.egov-page section#backend,
body.egov-page section#securitate,
body.egov-page section#industrii {
  background: #f4f6f9;  /* light grey, not pure white (27.09.2026); the cards stay #fff */
  border-top: 1px solid rgba(0,17,32,.08);
}
body.egov-page section#backend .eyebrow,
body.egov-page section#securitate .eyebrow,
body.egov-page section#industrii .eyebrow { color: var(--muted); }
body.egov-page section#backend .eyebrow::before,
body.egov-page section#securitate .eyebrow::before,
body.egov-page section#industrii .eyebrow::before { background: var(--ember); }
body.egov-page section#backend .section-head h2,
body.egov-page section#securitate .section-head h2,
body.egov-page section#industrii .section-head h2 { color: var(--navy-900); }
body.egov-page section#backend .section-head p,
body.egov-page section#securitate .section-head p,
body.egov-page section#industrii .section-head p { color: var(--muted); }

body.egov-page section#backend .card {
  background: #fff;
  border: 1px solid rgba(0,17,32,.10);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0,17,32,.04);
  transition: border-color .25s var(--ease), opacity .7s var(--ease), transform .7s var(--ease);
}
/* The tricolor side bar of the old palette is not used here. */
body.egov-page section#backend .card::before { display: none; }
body.egov-page section#backend .card:hover {
  border-color: rgba(228,129,47,.55);
  box-shadow: 0 1px 2px rgba(0,17,32,.04);
  transform: none;
}
body.egov-page section#backend .card h3 { color: var(--navy-900); }
body.egov-page section#backend .card > p { color: var(--muted); }

body.egov-page section#backend .card-ic {
  background: rgba(228,129,47,.10);
  border: 1px solid rgba(228,129,47,.35);
  border-radius: 7px;
  box-shadow: none;
}
body.egov-page section#backend .card-ic i { color: var(--ember); }
/* Future-proof within this section only: bullets, bold words, links. */
body.egov-page section#backend .card ul li i { color: var(--ember); }
body.egov-page section#backend strong,
body.egov-page section#backend b { color: var(--navy-900); }
body.egov-page section#backend a { color: var(--ember); }

/* ---- Security and Industries on white (27.09.2026) ----
   section#securitate (out of the blue band) and section#industrii (was the grey .alt)
   take the #backend look: frame and head from the shared rules above; here only their
   own inner elements, with the #backend card values (white, hairline rgba(0,17,32,.10),
   7px, hover = orange border only, no lift) and the orange icon tiles.
   The old navy/azure gradients and the azure badge labels are overridden. */

/* Security: list items with orange icon tiles, dark text. */
body.egov-page section#securitate .sec-item .si-ic {
  background: rgba(228,129,47,.10);
  border: 1px solid rgba(228,129,47,.35);
  border-radius: 7px;
  box-shadow: none;
}
body.egov-page section#securitate .sec-item .si-ic i { color: var(--ember); }
body.egov-page section#securitate .sec-item b { color: var(--navy-900); }
body.egov-page section#securitate .sec-item span { color: var(--muted); }
/* Security: the four badges as white cards; number dark, label in the orange. */
body.egov-page section#securitate .sec-badge {
  background: #fff;
  border: 1px solid rgba(0,17,32,.10);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0,17,32,.04);
  transition: border-color .25s var(--ease);
}
body.egov-page section#securitate .sec-badge:hover { border-color: rgba(228,129,47,.55); }
body.egov-page section#securitate .sec-badge .sb-num { color: var(--navy-900); }
body.egov-page section#securitate .sec-badge .sb-lbl { color: var(--ember); }

/* Industries: cards as the #backend cards. */
body.egov-page section#industrii .ind {
  background: #fff;
  border: 1px solid rgba(0,17,32,.10);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0,17,32,.04);
  transition: border-color .25s var(--ease), opacity .7s var(--ease), transform .7s var(--ease);
}
body.egov-page section#industrii .ind:hover {
  border-color: rgba(228,129,47,.55);
  box-shadow: 0 1px 2px rgba(0,17,32,.04);
  transform: none;
}
body.egov-page section#industrii .ind-ic {
  background: rgba(228,129,47,.10);
  border: 1px solid rgba(228,129,47,.35);
  border-radius: 7px;
  box-shadow: none;
}
body.egov-page section#industrii .ind-ic i { color: var(--ember); }
body.egov-page section#industrii .ind h4 { color: var(--navy-900); }
body.egov-page section#industrii .ind p { color: var(--muted); }
/* The closing line under the cards ("Domeniul căutat ... Întreabă-ne"). */
body.egov-page section#industrii .ind-more { text-align: center; margin-top: 32px; color: var(--muted); }
body.egov-page section#industrii .ind-more a { color: var(--ember); font-weight: 700; text-decoration: none; }
body.egov-page section#industrii .ind-more a:hover,
body.egov-page section#industrii .ind-more a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

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

/* general/index.css reserves 100px under the body for the fixed logo band; this page
   has no such band, so the reserve was an empty strip under the footer. */
body.egov-page { padding-bottom: 0; }

/* ---- Suite links in the hero (27.09.2026) ----
   Same row as in the hero of /ro/ (ro/ecm-sections.css, scoped there under .ro-ecm):
   five small outlined links to the VOGO eBS suites, light text on the dark hero,
   translucent white icons (full white on hover/focus), orange text and border on hover.
   Left-aligned, the first row of the hero (in place of the former audience switcher),
   keeping that switcher's 20px gap to the kicker. The orange is --ember. */
body.egov-page .pk-hero .ecm-aiao__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.egov-page .pk-hero .ecm-aiao__links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(12,47,89,.18); background: var(--card);
  color: var(--navy-700); text-decoration: none;
  font-size: .82rem; font-weight: 700; line-height: 1;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
body.egov-page .pk-hero .ecm-aiao__links a i { color: var(--ember); font-size: 14px; }
body.egov-page .pk-hero .ecm-aiao__links a:hover {
  border-color: var(--ember); color: var(--ink); background: #fff6ee;
}

/* Hero variant: thin translucent outline, light text. */
body.egov-page .pk-hero .ecm-aiao__links--hero { gap: 8px; margin: 20px 0 0; }
body.egov-page .pk-hero .ecm-aiao__links--hero a,
body.egov-page .pk-hero .ecm-aiao__links--hero a:link,
body.egov-page .pk-hero .ecm-aiao__links--hero a:visited {
  gap: 6px; padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22); background: transparent;
  color: rgba(255,255,255,.78); font-size: 12.5px; font-weight: 600;
}
/* The link of this page: a bit stronger text and outline. */
body.egov-page .pk-hero .ecm-aiao__links--hero a.is-current,
body.egov-page .pk-hero .ecm-aiao__links--hero a.is-current:link,
body.egov-page .pk-hero .ecm-aiao__links--hero a.is-current:visited {
  border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.95);
}
body.egov-page .pk-hero .ecm-aiao__links--hero a i { color: rgba(255,255,255,.72); font-size: 13px; }
/* Hero icons only: full white on hover/focus; the text and border keep the orange hover. */
body.egov-page .pk-hero .ecm-aiao__links--hero a:hover i,
body.egov-page .pk-hero .ecm-aiao__links--hero a:focus-visible i { color: #fff; }
body.egov-page .pk-hero .ecm-aiao__links--hero a:hover,
body.egov-page .pk-hero .ecm-aiao__links--hero a:focus-visible {
  border-color: var(--ember); color: var(--ember); background: transparent;
}
body.egov-page .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.egov-page .pk-hero .ecm-aiao__links--hero { gap: 6px; margin: 20px 0 0; }
  body.egov-page .pk-hero .ecm-aiao__links--hero a,
  body.egov-page .pk-hero .ecm-aiao__links--hero a:link,
  body.egov-page .pk-hero .ecm-aiao__links--hero a:visited { padding: 6px 9px; font-size: 12px; }
}

/* ---- Provenance seal in the hero (27.09.2026) ----
   Same lockup as in the hero of /ro/ (ro/ecm-sections.css, scoped there under .ro-ecm):
   a hairline roundel ("MADE IN EUROPE" on the arc, the 12 EU stars in the page orange,
   the registered sign at the centre) and a small plaque with the EUIPO record number.
   One link, to the public EUIPO record. A dark translucent glass keeps it legible over
   the photo. In the flow under the strip of four (the last row of this hero), 26px
   under it (18px on phones), left edge on the hero's left edge. The orange is this page's --ember (#E4812F, the /ro/ orange). */
body.egov-page .pk-hero .vogo-gov-hero__seal,
body.egov-page .pk-hero .vogo-gov-hero__seal:link,
body.egov-page .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.egov-page .pk-hero .vogo-gov-hero__seal:hover { border-color: rgba(228,129,47,.7); background: rgba(0,17,32,.46); }
body.egov-page .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.egov-page .pk-hero .vogo-gov-hero__seal-mark { width: 64px; height: 64px; flex: 0 0 64px; display: block; overflow: visible; }
body.egov-page .pk-hero .vogo-gov-hero__seal-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: .8; }
body.egov-page .pk-hero .vogo-gov-hero__seal-ring--inner { stroke: rgba(255,255,255,.26); stroke-width: .6; }
body.egov-page .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.egov-page .pk-hero .vogo-gov-hero__seal-arc--low { fill: rgba(255,255,255,.58); font-weight: 600; letter-spacing: 1.2px; }
body.egov-page .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. */
body.egov-page .pk-hero .vogo-gov-hero__seal-star {
  fill: var(--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.egov-page .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.egov-page .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.egov-page .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.egov-page .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.egov-page .pk-hero .vogo-gov-hero__seal-num i { font-size: 11px; color: var(--ember); }

/* Phone: a tighter gap to the strip, a smaller roundel. */
@media (max-width: 600px) {
  body.egov-page .pk-hero .vogo-gov-hero__seal,
  body.egov-page .pk-hero .vogo-gov-hero__seal:link,
  body.egov-page .pk-hero .vogo-gov-hero__seal:visited { margin: 18px 0 0; gap: 10px; padding: 6px 12px 6px 6px; }
  body.egov-page .pk-hero .vogo-gov-hero__seal-mark { width: 52px; height: 52px; flex-basis: 52px; }
  body.egov-page .pk-hero .vogo-gov-hero__seal-text { padding-left: 10px; }
  body.egov-page .pk-hero .vogo-gov-hero__seal-name { font-size: 12.5px; }
  body.egov-page .pk-hero .vogo-gov-hero__seal-num { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  body.egov-page .pk-hero .vogo-gov-hero__seal-star { animation: none; }
  body.egov-page .pk-hero .vogo-gov-hero__seal,
  body.egov-page .pk-hero .vogo-gov-hero__seal-star { 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.egov-page .pk-hero .pk-hero__inner {
  padding-top: calc(clamp(20px, 2.6vw, 32px) + var(--vh-h, 57px));
}

/* ---- Hero buttons (27.09.2026) ----
   The hero action buttons sit in the hero, under the lead and above the strip of
   four, styled as the hero buttons of /ro/ (ro/ecm-sections.css, .egov-cta-btn--hero):
   transparent pill, white text and icon, thin white border, icon after the label.
   The selector chain outranks the --primary / --alt / --demo / --seap fills.
   The lead above already keeps 28px (vogo-pk.css); the strip comes 24px below. */
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; }
}

/* ---- Services modal, dark institutional look (27.09.2026) ----
   Only #egov-modal-servicii ("Servicii publice preimplementate"); the AI
   certifications modal keeps the base .egov-modal styles above.
   Palette of the hero / blue bands: #001120 -> #04203c surface, white headings,
   translucent white text, --ember (#E4812F) accents, thin rgba(255,255,255,.13)
   borders, translucent cards, 7px radius, no heavy shadows. */
#egov-modal-servicii { background: rgba(0,8,18,.72); }
#egov-modal-servicii .egov-modal {
  background: linear-gradient(160deg, #001120 0%, #04203c 100%);
  border: 1px solid rgba(255,255,255,.13); border-radius: 7px; box-shadow: none;
  color: rgba(255,255,255,.8);
}
#egov-modal-servicii .egov-modal__head {
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.13);
  padding-right: 76px;
}
/* Top accent line: ember instead of the tricolor strip. */
#egov-modal-servicii .egov-modal__head::before { height: 3px; background: var(--ember); }
#egov-modal-servicii .egov-modal__eyebrow { color: var(--ember); }
#egov-modal-servicii .egov-modal__title { color: #fff; }
#egov-modal-servicii .egov-modal__sub { color: rgba(255,255,255,.76); }
/* Close (X): white, visible outline, ember focus ring. */
#egov-modal-servicii .egov-modal__close {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); color: #fff;
}
#egov-modal-servicii .egov-modal__close:hover { background: rgba(255,255,255,.18); border-color: #fff; }
#egov-modal-servicii .egov-modal__close:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
/* Body scrolls inside the modal. */
#egov-modal-servicii .egov-modal__body {
  min-height: 0; overscroll-behavior: contain;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
/* Count badge + datasheet link. */
#egov-modal-servicii .svc-count {
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
}
#egov-modal-servicii .svc-count i { color: var(--ember); }
#egov-modal-servicii .svc-datasheet {
  color: #fff; background: transparent; border: 1px solid var(--ember); border-radius: 7px;
}
#egov-modal-servicii .svc-datasheet:hover { color: #fff; background: rgba(228,129,47,.14); }
#egov-modal-servicii .svc-datasheet:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
#egov-modal-servicii .svc-datasheet i { color: var(--ember); }
/* Domain cards and numbered service rows. */
#egov-modal-servicii .svc-dom {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
}
#egov-modal-servicii .svc-dom-ic {
  background: rgba(228,129,47,.14); border: 1px solid rgba(228,129,47,.4); border-radius: 7px;
}
#egov-modal-servicii .svc-dom-ic i { color: var(--ember); }
#egov-modal-servicii .svc-dom-h h4 { color: #fff; }
#egov-modal-servicii .svc-dom ol li { color: rgba(255,255,255,.8); border-top-color: rgba(255,255,255,.1); }
#egov-modal-servicii .svc-dom ol li:first-child { border-top: 0; }
#egov-modal-servicii .svc-dom ol li::before {
  background: transparent; border: 1px solid rgba(228,129,47,.55); color: var(--ember); border-radius: 5px;
}
/* Phones: full-width sheet that fills the screen; the body keeps the scroll. */
@media (max-width: 600px) {
  #egov-modal-servicii { padding: 0; align-items: stretch; }
  #egov-modal-servicii .egov-modal {
    max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0;
  }
  #egov-modal-servicii .egov-modal__head { padding: 20px 64px 18px 16px; }
  #egov-modal-servicii .egov-modal__close { top: 14px; right: 14px; }
  #egov-modal-servicii .egov-modal__body { padding: 16px 16px 28px; }
  #egov-modal-servicii .svc-dom { padding: 16px; }
}

/* ---- Flux digital complet: icons in the VOGO icons style (27.09.2026) ----
   Model: C:\VOGO\images\modeleogo-icons-style.png (Microsoft 365 / Fluent-like): flat outline glyphs in a
   single saturated blue, no tile, no gradient, no shadow. Scoped to section#flux. */
body.egov-page section#flux { --vogo-icon-blue: #0F6CBD; }
body.egov-page section#flux .flow-extras .fx-ic {
  width: 34px; height: 34px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.egov-page section#flux .flow-extras .fx-ic i { font-size: 22px; color: var(--vogo-icon-blue); }
body.egov-page section#flux .wstep:not(:last-child)::after { color: var(--vogo-icon-blue); }