/*
  File role: the look of the VOGO eBS AIAO product page (/ro/aiao/).

  Identity comes from the site: the dark #001120 and the ember #E4812F that /ro/
  uses, and the global Inter Tight + Inter loaded by general/styles.css. No
  per-page palette, no second typeface.

  One idea carries the page: the product is a canvas, so the screens are shown
  large, on a dark field, and everything else stays quiet around them.

  Everything is scoped under body.aiao-pg, a class only this page carries.

  @file_version 1.5.6
*/

body.aiao-pg {
  --ai-abyss:  #001120;   /* the dark of /ro/ */
  --ai-deep:   #04203c;
  --ai-ember:  #E4812F;   /* the accent, on actions and on what matters most */
  --ai-ink:    #0a1838;
  --ai-muted:  #56638a;
  --ai-line:   #dde4f3;
  --ai-paper:  #ffffff;
  --ai-paper2: #f4f7fc;

  background: var(--ai-paper);
  color: var(--ai-ink);
}

body.aiao-pg .ai-wrap { width: min(1160px, 100vw - 32px); margin: 0 auto; }

/* ---- The menu: fixed, because overflow-x: hidden on html and body cancels sticky
        site-wide and the hero padding already makes room for it (--vh-h). Its
        colours are the scrolled look of /ro/ from the first pixel (27.09.2026):
        this page has no home hero for a transparent menu to sit on. ---- */
body.aiao-pg .vogo-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background:
    linear-gradient(90deg, rgba(0,17,32,.94) 0%, rgba(0,17,32,.78) 42%, rgba(0,17,32,.34) 70%, rgba(0,17,32,.24) 100%),
    url('/ro/img/bk-image-hero.webp') center top / cover no-repeat fixed,
    #001120;
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}
body.aiao-pg .vogo-header .vh-band-top { background: transparent; border-bottom-color: transparent; }

/* ---- Hero ----
   The canvas of the designer stands behind the words, dark and out of focus, so
   the page opens on the product without asking anyone to read a screenshot. */
body.aiao-pg .ai-hero {
  background:
    linear-gradient(100deg, rgba(0,17,32,.97) 0%, rgba(0,17,32,.93) 34%, rgba(4,32,60,.72) 62%, rgba(4,32,60,.52) 100%),
    url('img/designer-proces.webp') right center / cover no-repeat,
    var(--ai-abyss);
  color: #fff;
}
body.aiao-pg .ai-hero__inner {
  /* Top (27.09.2026): the first row is the small suite-links row, so the gap under the fixed
     header is ~32px on desktop and ~20px on phones; the header height stays included so the
     row never slides under .vogo-header. Was clamp(64px, 9vw, 108px). Bottom unchanged. */
  padding: calc(clamp(20px, 2.6vw, 32px) + var(--vh-h, 57px)) 0 clamp(56px, 8vw, 92px);
  max-width: 720px;
}
body.aiao-pg .ai-kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ai-ember);
  margin: 0 0 12px;
}
body.aiao-pg .ai-hero h1 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 18px;
}
body.aiao-pg .ai-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255,255,255,.84);
  max-width: 56ch;
  margin: 0 0 28px;
}

/* ---- Actions ---- */
body.aiao-pg .ai-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.aiao-pg .ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.1;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.aiao-pg .ai-btn i { font-size: 1.05rem; }
body.aiao-pg .ai-btn--accent { background: var(--ai-ember); color: #fff; }
body.aiao-pg .ai-btn--accent:hover { background: #cf7120; color: #fff; }
body.aiao-pg .ai-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
body.aiao-pg .ai-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
/* On a light section the ghost button needs ink, not white. */
body.aiao-pg .ai-section:not(.ai-section--dark) .ai-btn--ghost { color: var(--ai-ink); border-color: var(--ai-line); }
body.aiao-pg .ai-section:not(.ai-section--dark) .ai-btn--ghost:hover { background: var(--ai-paper2); color: var(--ai-ink); }

/* The four things a reader checks first, on a line under the actions. */
body.aiao-pg .ai-args {
  list-style: none;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}
body.aiao-pg .ai-args li { display: flex; align-items: center; gap: 9px; }
body.aiao-pg .ai-args li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ai-ember);
}

/* ---- Sections ---- */
body.aiao-pg .ai-section { padding: clamp(56px, 7vw, 92px) 0; }
body.aiao-pg .ai-section--soft { background: var(--ai-paper2); }
body.aiao-pg .ai-section--dark {
  background: linear-gradient(180deg, var(--ai-abyss) 0%, var(--ai-deep) 100%);
  color: #fff;
}
body.aiao-pg .ai-h2 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
body.aiao-pg .ai-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ai-muted);
  margin: 0 0 34px;
  max-width: 70ch;
}

/* ---- The description ---- */
body.aiao-pg .ai-intro { max-width: 78ch; margin: 0 auto; }
body.aiao-pg .ai-intro p {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #2c3a63;
}
body.aiao-pg .ai-intro strong { color: var(--ai-ember); }
body.aiao-pg .ai-intro__close {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(17,48,85,.14);
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--ai-ink);
}

/* ---- The film under the description (29.09.2026) ----
   A 16:9 frame that follows the width of the column, up to 960px, centred; the iframe fills it, so there is
   nothing to scroll sideways on a phone. Same frame as the film on /ro/e-reg/. */
body.aiao-pg .ai-video {
  max-width: 960px;
  margin: 36px auto 8px;
}
body.aiao-pg .ai-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: #001120;
  box-shadow: 0 10px 30px rgba(0,17,32,.18);
}
body.aiao-pg .ai-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  body.aiao-pg .ai-video { margin: 24px auto 4px; }
}

/* ---- The screens: the loudest thing on the page, on a dark field that runs the
        full width of the window. ---- */
body.aiao-pg .ai-screens {
  padding: clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.06), transparent 46%),
    linear-gradient(135deg, var(--ai-abyss) 0%, var(--ai-deep) 55%, var(--ai-abyss) 100%);
  color: #fff;
}
body.aiao-pg .ai-screen {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 48px;
  align-items: center;
  padding: clamp(26px, 4vw, 44px) 0;
}
body.aiao-pg .ai-screen + .ai-screen { border-top: 1px solid rgba(255,255,255,.1); }
body.aiao-pg .ai-screen--flip .ai-screen__text { order: 2; }
body.aiao-pg .ai-screen h2 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 14px;
}
/* The ember rule above the title marks where a new screen starts. */
body.aiao-pg .ai-screen h2::before {
  content: "";
  display: block;
  width: 34px; height: 3px;
  margin-bottom: 16px;
  background: var(--ai-ember);
  border-radius: 2px;
}
body.aiao-pg .ai-screen p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
}
body.aiao-pg .ai-screen__shot { margin: 0; }
body.aiao-pg .ai-screen__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(228,129,47,.22);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.85);
}

/* ---- What the platform is made of ---- */
body.aiao-pg .ai-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.aiao-pg .ai-cap {
  background: var(--ai-paper);
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.aiao-pg .ai-cap:hover {
  border-color: #b9c6e3;
  box-shadow: 0 14px 30px -24px rgba(7,23,58,.55);
}
body.aiao-pg .ai-cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(228,129,47,.12);
  color: var(--ai-ember);
  font-size: 1.15rem;
  margin-bottom: 14px;
}
body.aiao-pg .ai-cap h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ai-ink);
}
body.aiao-pg .ai-cap p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ai-muted);
}

/* ---- Questions ---- */
body.aiao-pg .ai-faq { border-top: 1px solid var(--ai-line); max-width: 920px; }
body.aiao-pg .ai-faq__item { border-bottom: 1px solid var(--ai-line); }
body.aiao-pg .ai-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ai-ink);
}
body.aiao-pg .ai-faq__item summary::-webkit-details-marker { display: none; }
body.aiao-pg .ai-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ai-ember);
}
body.aiao-pg .ai-faq__item[open] summary::after { content: "\2212"; }
body.aiao-pg .ai-faq__item summary:focus-visible { outline: 2px solid var(--ai-ember); outline-offset: 3px; }
body.aiao-pg .ai-faq__item p {
  margin: 0 0 20px;
  padding-right: 44px;
  line-height: 1.7;
  color: var(--ai-muted);
  max-width: 82ch;
}

/* ---- The closing invitation ---- */
body.aiao-pg .ai-final__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
  max-width: 66ch;
  margin: 0 0 26px;
}
body.aiao-pg .ai-fine {
  margin: 28px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}
body.aiao-pg .ai-fine strong { color: rgba(255,255,255,.88); }

/* ---- Load on scroll. The hidden state is applied by script, never here in the
        markup, so a visitor without JavaScript sees the whole page. ---- */
body.aiao-pg .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
body.aiao-pg .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.aiao-pg .rv { opacity: 1; transform: none; transition: none; }
}

/* ---- Tablets ---- */
@media (max-width: 1040px) {
  body.aiao-pg .ai-caps { grid-template-columns: repeat(2, 1fr); }
  body.aiao-pg .ai-screen { grid-template-columns: 1fr; gap: 26px; }
  body.aiao-pg .ai-screen--flip .ai-screen__text { order: 0; }
}

/* ---- Phones ---- */
@media (max-width: 720px) {
  body.aiao-pg .ai-hero {
    background:
      linear-gradient(180deg, rgba(0,17,32,.9) 0%, rgba(0,17,32,.95) 100%),
      url('img/designer-proces.webp') center center / cover no-repeat,
      var(--ai-abyss);
  }
  body.aiao-pg .ai-btn { width: 100%; justify-content: center; }
  body.aiao-pg .ai-args { gap: 10px 18px; font-size: .86rem; }
  body.aiao-pg .ai-caps { grid-template-columns: 1fr; }
  body.aiao-pg .ai-intro p { font-size: 1.04rem; }
}

/* ---- The DNSH note (24.09.2026, restyled) ----
   A legal line: white, set in italic, and marked by a straight rule on its left
   rather than by a coloured panel. Square corners on purpose - it is a note, not
   a card. Same block on every page that carries it. */
body.aiao-pg .dnsh-section { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(38px, 5vw, 56px); }
body.aiao-pg .dnsh-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: #ffffff;
  border: 0;
  border-left: 3px solid #011b34;
  border-radius: 0;
}
body.aiao-pg .dnsh-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 0;
  background: transparent;
  color: #011b34;
  font-size: 1.05rem;
}
body.aiao-pg .dnsh-note p {
  margin: 0;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.65;
  color: #56638a;
}
body.aiao-pg .dnsh-note strong { color: #011b34; font-style: italic; }

@media (max-width: 720px) {
  body.aiao-pg .dnsh-note { padding: 16px 18px; gap: 12px; }
}

/* ---- The two themes, side by side (24.09.2026) ----
   One screen, twice: the point is that nothing moves between them, so the two
   figures share a row and the same frame. */
body.aiao-pg .ai-themes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 26px;
}
body.aiao-pg .ai-theme { margin: 0; }
body.aiao-pg .ai-theme img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--ai-line);
  box-shadow: 0 18px 40px -30px rgba(7,23,58,.6);
}
body.aiao-pg .ai-theme figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ai-ink);
}
body.aiao-pg .ai-theme__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--ai-line);
}
body.aiao-pg .ai-theme__dot--dark { background: #0d1526; border-color: #0d1526; }
body.aiao-pg .ai-theme__dot--light { background: #ffffff; }

/* ---- A section built as text beside one screen ---- */
body.aiao-pg .ai-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: start;
  margin-top: 26px;
}
body.aiao-pg .ai-split--flip .ai-split__text { order: 2; }
body.aiao-pg .ai-split__text h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ai-ink);
  margin: 0 0 12px;
}
body.aiao-pg .ai-split__text h3 + .ai-list,
body.aiao-pg .ai-split__text h3 + .ai-split__note { margin-bottom: 26px; }
body.aiao-pg .ai-split__note {
  margin: 0;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--ai-muted);
}
body.aiao-pg .ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.aiao-pg .ai-list li {
  position: relative;
  padding-left: 18px;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ai-muted);
}
body.aiao-pg .ai-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ai-ember);
}
body.aiao-pg .ai-list strong { color: var(--ai-ink); }
body.aiao-pg .ai-split__shot { margin: 0; }
body.aiao-pg .ai-split__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--ai-line);
  box-shadow: 0 22px 46px -32px rgba(7,23,58,.6);
}

/* ---- The four states under a section: a word and a line, nothing more ---- */
body.aiao-pg .ai-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ai-line);
}
body.aiao-pg .ai-fact span {
  display: block;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ai-ember);
  margin-bottom: 6px;
}
body.aiao-pg .ai-fact p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ai-muted);
}

@media (max-width: 1040px) {
  body.aiao-pg .ai-split { grid-template-columns: 1fr; gap: 26px; }
  body.aiao-pg .ai-split--flip .ai-split__text { order: 0; }
  body.aiao-pg .ai-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body.aiao-pg .ai-themes { grid-template-columns: 1fr; gap: 18px; }
  body.aiao-pg .ai-facts { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Wide blue band (27.09.2026): the look of .ro-ecm .section.ecm-blue-band on /ro/,
   for the lists of the page. Light text, translucent cards, the ember on icons. ---- */
body.aiao-pg .ai-blue-band {
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.06), transparent 45%),
              linear-gradient(135deg, var(--ai-abyss) 0%, var(--ai-deep) 55%, var(--ai-abyss) 100%);
  border-top: 1px solid rgba(228,129,47,.22);
  color: #fff;
}
body.aiao-pg .ai-blue-band--sub { padding: 52px 0 58px; }
body.aiao-pg .ai-blue-band .ai-h2 { color: #fff; }
body.aiao-pg .ai-blue-band .ai-sub { color: rgba(255,255,255,.78); }
body.aiao-pg .ai-blue-band .ai-cap {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  box-shadow: none;
}
body.aiao-pg .ai-blue-band .ai-cap:hover {
  border-color: rgba(228,129,47,.55);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
body.aiao-pg .ai-blue-band .ai-cap__icon { background: rgba(228,129,47,.13); color: var(--ai-ember); }
body.aiao-pg .ai-blue-band .ai-cap h3 { color: #fff; }
body.aiao-pg .ai-blue-band .ai-cap p { color: rgba(255,255,255,.72); }
/* The facts strip opens the band, so it drops the rule and gap it has under a section. */
body.aiao-pg .ai-blue-band .ai-facts { margin-top: 0; padding-top: 0; border-top: 0; }
body.aiao-pg .ai-blue-band .ai-fact p { color: rgba(255,255,255,.78); }

/* ---- Under the demo form: the e-Registratura link and the product line kept from the
   old closing section, on the same column as the form. ---- */
body.aiao-pg .ai-contact-extra {
  max-width: 880px;
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}

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

/* ---- Suite links in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css: the base .ecm-aiao__links rules and the hero
   variant .ecm-aiao__links--hero), re-scoped to this hero, which is not inside .ro-ecm:
   the orange is --ai-ember and the easing curve is written out. Small light text on the
   dark hero, thin outline, translucent white icons (full white on hover/focus), orange
   text and border on hover. First row of the hero, above the kicker, 20px over it (phones
   too), as on /ro/e-gov/ and /ro/e-biz/. The link of this page (AIAO) is marked
   .is-current and drawn a bit stronger. */
body.aiao-pg .ai-hero .ecm-aiao__links--hero { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
body.aiao-pg .ai-hero .ecm-aiao__links--hero a,
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:link,
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:visited {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22); background: transparent;
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: border-color .2s cubic-bezier(.22,.61,.36,1), color .2s cubic-bezier(.22,.61,.36,1), background .2s cubic-bezier(.22,.61,.36,1);
}
body.aiao-pg .ai-hero .ecm-aiao__links--hero a i { color: rgba(255,255,255,.72); font-size: 13px; }
/* The page we are on: stronger text and outline; hover and focus below still apply. */
body.aiao-pg .ai-hero .ecm-aiao__links--hero a.is-current { color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.45); }
/* Icons only: full white on hover/focus; the text and border take the orange. */
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:hover i,
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:focus-visible i { color: #fff; }
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:hover,
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:focus-visible {
  border-color: var(--ai-ember); color: var(--ai-ember); background: transparent;
}
body.aiao-pg .ai-hero .ecm-aiao__links--hero a:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
/* Phone: tighter pills; same 20px over the kicker. */
@media (max-width: 600px) {
  body.aiao-pg .ai-hero .ecm-aiao__links--hero { gap: 6px; margin: 20px 0 0; }
  body.aiao-pg .ai-hero .ecm-aiao__links--hero a,
  body.aiao-pg .ai-hero .ecm-aiao__links--hero a:link,
  body.aiao-pg .ai-hero .ecm-aiao__links--hero a:visited { padding: 6px 9px; font-size: 12px; }
}

/* ---- Provenance seal in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css, block of the same name), re-scoped to this
   page: the hero here is not inside .ro-ecm, so the orange is --ai-ember and the easing
   curve is written out. A hairline roundel ("MADE IN EUROPE" on the arc, the 12 EU stars
   in orange, the registered sign at the centre) and a plaque with the EUIPO record
   number; one link, to the public EUIPO record. The dark translucent glass keeps it
   legible over the hero image. It sits right under the buttons, 28px (20px on phones),
   the gap the suite links had there before they moved to the top of the hero; left edge
   on the first button's line; the .ai-args line under it keeps its own gap. */
body.aiao-pg .ai-hero .vogo-gov-hero__seal,
body.aiao-pg .ai-hero .vogo-gov-hero__seal:link,
body.aiao-pg .ai-hero .vogo-gov-hero__seal:visited {
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 100%;
  margin: 28px 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 cubic-bezier(.22,.61,.36,1), background .25s cubic-bezier(.22,.61,.36,1);
}
body.aiao-pg .ai-hero .vogo-gov-hero__seal:hover { border-color: rgba(228,129,47,.7); background: rgba(0,17,32,.46); }
body.aiao-pg .ai-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.aiao-pg .ai-hero .vogo-gov-hero__seal-mark { width: 64px; height: 64px; flex: 0 0 64px; display: block; overflow: visible; }
body.aiao-pg .ai-hero .vogo-gov-hero__seal-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: .8; }
body.aiao-pg .ai-hero .vogo-gov-hero__seal-ring--inner { stroke: rgba(255,255,255,.26); stroke-width: .6; }
body.aiao-pg .ai-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.aiao-pg .ai-hero .vogo-gov-hero__seal-arc--low { fill: rgba(255,255,255,.58); font-weight: 600; letter-spacing: 1.2px; }
body.aiao-pg .ai-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.aiao-pg .ai-hero .vogo-gov-hero__seal-star {
  fill: var(--ai-ember); opacity: .85;
  transform-box: fill-box; transform-origin: center;
  animation: vogoSealStarIn .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(.5s + var(--i) * 70ms);
  transition: opacity .25s cubic-bezier(.22,.61,.36,1);
}
body.aiao-pg .ai-hero .vogo-gov-hero__seal:hover .vogo-gov-hero__seal-star { opacity: 1; }
/* Same keyframes as in ro/ecm-sections.css (identical body), declared here so this
   page does not depend on the shared stylesheet for them. */
@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.aiao-pg .ai-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.aiao-pg .ai-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.aiao-pg .ai-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.aiao-pg .ai-hero .vogo-gov-hero__seal-num i { font-size: 11px; color: var(--ai-ember); }

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

/* ---- Hero buttons as on /ro/ (27.09.2026): transparent pill, thin white border, icon after the label ---- */
body.aiao-pg .ai-hero .ai-actions .ai-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 ease, border-color .2s ease;
}
body.aiao-pg .ai-hero .ai-actions .ai-btn:hover,
body.aiao-pg .ai-hero .ai-actions .ai-btn:focus-visible { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; transform: none; box-shadow: none; }
body.aiao-pg .ai-hero .ai-actions .ai-btn i { color: #fff; }