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

    /* 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; }
    /* The badges sit under the strip, on the dark. */
    body.vogo-pk .pk-hero .vogo-eu-badges { margin: 26px 0 0; }

    /* 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) + EU trust badges. */
    .vogo-crest i { font-size: 30px; color: #0C2F59; line-height: 1; }
    .vogo-eu-badges { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    .vogo-eu-badge { height: 54px; width: auto; display: block; background: #fff; border-radius: 8px; padding: 4px 8px; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
    /* "Made in Europe" wordmark is wide with small text — enlarge it for legibility (EUIPO stays 54px). */
    .vogo-eu-badge:not(.vogo-eu-badge--euipo) { height: 70px; padding: 3px 10px; }
    /* Badge link wrappers (both open the EUIPO trademark record in a new tab). */
    .vogo-eu-badge-link { display: inline-flex; line-height: 0; border-radius: 8px; transition: transform .2s var(--ease); }
    .vogo-eu-badge-link:hover { transform: translateY(-1px); }
    @media (max-width: 720px) {
      .vogo-topbar__row { flex-wrap: wrap; }
      .vogo-eu-badges { margin-left: 0; width: 100%; }
      .vogo-eu-badge { height: 44px; }
      .vogo-eu-badge:not(.vogo-eu-badge--euipo) { height: 56px; }
    }

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

    /* Audience switcher (e-gov ↔ e-biz) — segmented pills at the top of the hero (dark bg). */
    .vogo-aud-switch { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 20px; padding: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-family: Inter, sans-serif; }
    .vogo-aud-switch a, .vogo-aud-switch span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
    .vogo-aud-switch .is-active { background: #fff; color: #0C2F59; }
    .vogo-aud-switch a:not(.is-active) { color: rgba(255,255,255,.85); }
    .vogo-aud-switch a:not(.is-active):hover { background: rgba(255,255,255,.14); color: #fff; }
    @media (max-width: 480px) { .vogo-aud-switch { flex-wrap: wrap; } .vogo-aud-switch a, .vogo-aud-switch span { padding: 6px 12px; font-size: .76rem; } }

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

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

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