:root {
  --black: #0B0D0F;
  --graphite: #15191B;
  --panel: #202527;
  --text: #FFFFFF;
  --muted: #D6D6D6;
  --soft: #A8ADAA;
  --green: #93C152;
  --green-strong: #A7D962;
  --blue: #0093E5;
  --red: #E52000;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Source Sans Pro", Calibri, Arial, sans-serif;
  background:
    radial-gradient(circle at 70% 0%, rgba(147, 193, 82, 0.13), transparent 28rem),
    linear-gradient(180deg, #080A0C 0%, var(--black) 34%, #0D1012 100%);
  color: var(--text);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; background: var(--green); color: #101210; padding: 0.7rem 1rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(8, 10, 12, 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand img { display: block; height: 54px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.96rem; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.nav-cta { border: 1px solid rgba(147, 193, 82, 0.42); border-radius: 999px; padding: 0.65rem 0.95rem; color: var(--green-strong) !important; }
.nav-toggle { display: none; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: 0.65rem 1rem; font-weight: 700; }
.hero { padding: 5.5rem 0 3.2rem; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr); gap: 2.3rem; align-items: center; }
.kicker, .eyebrow, .tag, .pipeline-label { display: inline-flex; width: fit-content; color: var(--green-strong); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; font-size: 0.78rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0.75rem 0 1.15rem; font-size: clamp(2.85rem, 6vw, 5.4rem); line-height: 0.96; letter-spacing: -0.055em; }
h2 { font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.02; letter-spacing: -0.045em; margin: 0.5rem 0 1rem; }
h3 { font-size: 1.35rem; line-height: 1.15; margin: 0 0 0.65rem; }
.lead { font-size: clamp(1.1rem, 2vw, 1.38rem); color: var(--muted); max-width: 44rem; }
.lead-secondary { color: var(--soft); font-size: 1.04rem; max-width: 44rem; }
.lead-small, .section-header p, .contact-grid p, .why-grid p, .norenvia-panel p { color: var(--muted); font-size: 1.06rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.8rem 0 1.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0.9rem 1.25rem; border-radius: 999px; text-decoration: none; font-weight: 800; border: 1px solid transparent; cursor: pointer; }
.button-primary { background: var(--green); color: #0E120F; box-shadow: 0 10px 26px rgba(147, 193, 82, 0.18); }
.button-primary:hover, .button-primary:focus-visible { background: var(--green-strong); }
.button-secondary { background: transparent; color: var(--text); border-color: rgba(147, 193, 82, 0.38); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 0; margin: 1.3rem 0 0; list-style: none; }
.hero-chips li { border: 1px solid rgba(147, 193, 82, 0.22); background: rgba(147, 193, 82, 0.07); color: var(--muted); border-radius: 999px; padding: 0.55rem 0.8rem; font-weight: 700; font-size: 0.94rem; }
.hero-visual { display: grid; gap: 0.85rem; }
.visual-card { padding: 1.1rem; background: radial-gradient(circle at 18% 25%, rgba(147, 193, 82, 0.16), transparent 18rem), linear-gradient(180deg, rgba(42, 48, 51, 0.95), rgba(21, 25, 27, 0.95)); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.visual-node { padding: 1rem; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); background: rgba(0,0,0,0.18); display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center; }
.visual-node strong { font-size: 1.08rem; }
.visual-node small { color: var(--soft); grid-column: 2; }
.node-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--green-strong); border: 1px solid rgba(147,193,82,0.35); border-radius: 50%; font-size: 1.25rem; }
.visual-node-accent { border-color: rgba(147,193,82,0.32); background: rgba(147,193,82,0.08); }
.visual-link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--green-strong); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 800; }
.visual-link::before, .visual-link::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent); }
.visual-link em { font-style: normal; padding: 0 0.75rem; }
.visual-caption { color: var(--soft); font-size: 0.94rem; margin: 0; }
.logo-strip { padding: 2rem 0; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.logo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: 1rem; }
.logo-row > div { min-height: 5.7rem; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(255,255,255,0.08); }
.logo-row img { max-height: 48px; width: auto; object-fit: contain; }
.logo-row .norenvia-logo { background: #0A0F1C; }
.logo-row .norenvia-logo img { max-height: 56px; }
.logo-row img[src*="flowplus-logo"] { max-height: 42px; }
.section { padding: 4.3rem 0; border-bottom: 1px solid var(--border); }
.section-header { max-width: 760px; margin-bottom: 1.6rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.capability-card, .reference-card, .pipeline-card, .why-list article, .norenvia-panel, .contact-form, .legal-card { background: rgba(32, 37, 39, 0.86); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,0,0,0.18); }
.capability-card { padding: 1.35rem; }
.card-number { color: var(--green); font-weight: 900; letter-spacing: 0.1em; display: block; margin-bottom: 1.4rem; }
.capability-card p, .reference-card p, .why-list p, .pipeline-card small, .form-note, .footer-grid p { color: var(--soft); }
.section-technology { background: radial-gradient(circle at 85% 20%, rgba(0, 147, 229, 0.10), transparent 22rem), rgba(255,255,255,0.015); }
.tech-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr); gap: 1.4rem; align-items: start; }
.tech-points { display: grid; gap: 0.85rem; margin-top: 1.35rem; }
.tech-points article { padding: 1rem; border-left: 3px solid var(--green); background: rgba(147,193,82,0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tech-points p { margin: 0.35rem 0 0; color: var(--muted); }
.pipeline-card { padding: 1.15rem; display: grid; gap: 0.8rem; }
.pipeline-step { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center; padding: 0.85rem; background: rgba(0,0,0,0.18); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.08); }
.pipeline-step span { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #111; font-weight: 900; }
.pipeline-step small { display: block; margin-top: 0.12rem; }
.reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.reference-card { padding: 1.1rem; display: flex; min-height: 100%; flex-direction: column; }
.reference-logo { min-height: 5.8rem; display: grid; place-items: center; padding: 0.9rem; background: #fff; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.reference-logo img { max-height: 52px; width: auto; object-fit: contain; }
.reference-logo.norenvia { background: #0A0F1C; }
.reference-logo.norenvia img { max-height: 62px; }
.reference-logo.flowplus img { max-height: 44px; }
.reference-card h3 { margin-top: 0.55rem; }
.reference-card a { margin-top: auto; color: var(--green-strong); font-weight: 800; text-decoration: none; }
.section-why { background: rgba(255,255,255,0.02); }
.why-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr); gap: 1.4rem; align-items: start; }
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.why-list article { padding: 1.1rem; }
.norenvia-section { background: linear-gradient(180deg, rgba(6, 10, 22, 0.88), rgba(5, 9, 20, 0.98)); }
.norenvia-panel { padding: 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: radial-gradient(circle at 20% 15%, rgba(37, 131, 255, 0.24), transparent 17rem), radial-gradient(circle at 85% 65%, rgba(0, 180, 255, 0.14), transparent 16rem), linear-gradient(135deg, rgba(10, 20, 46, 0.96), rgba(11, 16, 34, 0.96)); border: 1px solid rgba(72, 135, 255, 0.24); box-shadow: 0 20px 56px rgba(0, 23, 64, 0.42), inset 0 1px 0 rgba(255,255,255,0.05); }
.norenvia-panel div { max-width: 780px; }
.norenvia-panel-logo { display: block; max-width: 210px; margin: 0 0 1rem; }
.norenvia-panel h2 { max-width: 820px; }
.norenvia-panel p { color: #D7E6FF; }
.norenvia-panel .norenvia-eyebrow { color: #8FBBFF; }
.button-norenvia { background: linear-gradient(135deg, #10B5FF, #0B67FF); color: #FFFFFF; box-shadow: 0 10px 28px rgba(11, 103, 255, 0.30); }
.button-norenvia:hover, .button-norenvia:focus-visible { background: linear-gradient(135deg, #18C2FF, #1A78FF); }
.contact-direct a { color: var(--green-strong); font-weight: 800; }
.contact-form { padding: 1.2rem; display: grid; gap: 0.9rem; }
.contact-form label { display: grid; gap: 0.35rem; }
.contact-form span { font-weight: 800; }
input, textarea { width: 100%; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(0,0,0,0.22); color: var(--text); padding: 0.82rem 0.9rem; font: inherit; }
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 2px solid rgba(147,193,82,0.55); outline-offset: 2px; }
.site-footer { padding: 2rem 0; background: #070809; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
.footer-grid a { display: block; color: var(--muted); text-decoration: none; margin-top: 0.45rem; }
.page-hero { padding: 5rem 0; }
.legal-card { padding: 1.3rem; }
@media (max-width: 1060px) {
  .hero-grid, .tech-grid, .why-grid, .contact-grid { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .header-inner { min-height: 72px; }
  .brand img { height: 46px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; top: 72px; left: 1rem; right: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(8,10,12,0.98); flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .hero { padding-top: 3.4rem; }
  h1 { font-size: clamp(2.4rem, 13vw, 4rem); }
  .logo-row, .grid-3, .reference-grid, .why-list, .footer-grid { grid-template-columns: 1fr; }
  .norenvia-panel { align-items: flex-start; flex-direction: column; }
}


/* Polished review version: typewriter hero and subtle interaction refinements */
.typewriter-heading {
  min-height: 1.92em;
}

.typewriter-heading.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.08em;
  background: var(--green);
  border-radius: 999px;
  vertical-align: -0.08em;
  animation: viimatechCaretBlink 0.72s steps(1) infinite;
}

@keyframes viimatechCaretBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.visual-card,
.capability-card,
.reference-card,
.pipeline-card,
.why-list article,
.contact-form {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
  .capability-card:hover,
  .reference-card:hover,
  .why-list article:hover {
    transform: translateY(-3px);
    border-color: rgba(147, 193, 82, 0.26);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.24);
  }

  .visual-card:hover {
    border-color: rgba(147, 193, 82, 0.24);
  }
}

.reference-card a::after {
  content: " →";
}

.hero-visual {
  position: relative;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -1rem;
  z-index: -1;
  background: radial-gradient(circle at 50% 35%, rgba(147, 193, 82, 0.08), transparent 58%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-heading.is-typing::after {
    display: none;
    animation: none;
  }

  .visual-card,
  .capability-card,
  .reference-card,
  .pipeline-card,
  .why-list article,
  .contact-form {
    transition: none;
  }
}

@media (max-width: 760px) {
  .typewriter-heading {
    min-height: 2.85em;
  }
}


/* Hero graph perimeter highlight after typewriter completion */
.visual-card {
  position: relative;
  overflow: hidden;
}

.visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(147, 193, 82, 0);
  box-shadow: none;
  opacity: 0;
  transition: border-color 280ms ease, box-shadow 280ms ease, opacity 280ms ease;
}

.visual-card.signal-highlight::after {
  opacity: 1;
  border-color: rgba(147, 193, 82, 0.34);
  box-shadow:
    0 0 0 1px rgba(147, 193, 82, 0.08),
    0 0 28px rgba(147, 193, 82, 0.16),
    inset 0 0 22px rgba(147, 193, 82, 0.045);
  animation: viimatechSignalFramePulse 2.4s ease-out 1;
}

.visual-card.signal-highlight {
  border-color: rgba(147, 193, 82, 0.22);
}

@keyframes viimatechSignalFramePulse {
  0% {
    border-color: rgba(147, 193, 82, 0.08);
    box-shadow:
      0 0 0 0 rgba(147, 193, 82, 0),
      0 0 0 rgba(147, 193, 82, 0),
      inset 0 0 0 rgba(147, 193, 82, 0);
  }

  34% {
    border-color: rgba(147, 193, 82, 0.58);
    box-shadow:
      0 0 0 1px rgba(147, 193, 82, 0.18),
      0 0 34px rgba(147, 193, 82, 0.24),
      inset 0 0 24px rgba(147, 193, 82, 0.075);
  }

  100% {
    border-color: rgba(147, 193, 82, 0.34);
    box-shadow:
      0 0 0 1px rgba(147, 193, 82, 0.08),
      0 0 28px rgba(147, 193, 82, 0.16),
      inset 0 0 22px rgba(147, 193, 82, 0.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight::after {
    animation: none;
  }
}


/* Stronger hero graph perimeter highlight */
.visual-card.signal-highlight::after {
  opacity: 1;
  inset: -1px;
  border-width: 2px;
  border-color: rgba(147, 193, 82, 0.68);
  box-shadow:
    0 0 0 1px rgba(147, 193, 82, 0.20),
    0 0 22px rgba(147, 193, 82, 0.32),
    0 0 58px rgba(147, 193, 82, 0.22),
    inset 0 0 28px rgba(147, 193, 82, 0.11);
  animation: viimatechSignalFramePulseStrong 2.7s ease-out 1;
}

.visual-card.signal-highlight {
  border-color: rgba(147, 193, 82, 0.46);
  box-shadow:
    var(--shadow),
    0 0 42px rgba(147, 193, 82, 0.13);
}

@keyframes viimatechSignalFramePulseStrong {
  0% {
    border-color: rgba(147, 193, 82, 0.10);
    box-shadow:
      0 0 0 0 rgba(147, 193, 82, 0),
      0 0 0 rgba(147, 193, 82, 0),
      inset 0 0 0 rgba(147, 193, 82, 0);
  }

  22% {
    border-color: rgba(167, 217, 98, 0.96);
    box-shadow:
      0 0 0 2px rgba(147, 193, 82, 0.32),
      0 0 34px rgba(147, 193, 82, 0.48),
      0 0 82px rgba(147, 193, 82, 0.30),
      inset 0 0 34px rgba(147, 193, 82, 0.18);
  }

  58% {
    border-color: rgba(147, 193, 82, 0.78);
    box-shadow:
      0 0 0 1px rgba(147, 193, 82, 0.24),
      0 0 26px rgba(147, 193, 82, 0.38),
      0 0 66px rgba(147, 193, 82, 0.25),
      inset 0 0 30px rgba(147, 193, 82, 0.13);
  }

  100% {
    border-color: rgba(147, 193, 82, 0.68);
    box-shadow:
      0 0 0 1px rgba(147, 193, 82, 0.20),
      0 0 22px rgba(147, 193, 82, 0.32),
      0 0 58px rgba(147, 193, 82, 0.22),
      inset 0 0 28px rgba(147, 193, 82, 0.11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight::after {
    animation: none;
  }
}


/* Perimeter bright-spot animation for hero graph */
.visual-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  background:
    conic-gradient(
      from 0deg,
      rgba(147, 193, 82, 0) 0deg,
      rgba(147, 193, 82, 0) 326deg,
      rgba(147, 193, 82, 0.22) 336deg,
      rgba(194, 236, 121, 0.96) 346deg,
      rgba(147, 193, 82, 0.45) 353deg,
      rgba(147, 193, 82, 0) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transform: rotate(0turn);
  filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
}

.visual-card.signal-highlight::before {
  opacity: 1;
  animation: viimatechPerimeterSpot 2.4s linear 1;
}

.visual-card.signal-highlight::after {
  opacity: 1;
  inset: 0;
  border-width: 1px;
  border-color: rgba(147, 193, 82, 0.40);
  box-shadow:
    0 0 0 1px rgba(147, 193, 82, 0.14),
    0 0 20px rgba(147, 193, 82, 0.18),
    inset 0 0 18px rgba(147, 193, 82, 0.07);
  animation: none;
}

.visual-card.signal-highlight {
  border-color: rgba(147, 193, 82, 0.30);
  box-shadow:
    var(--shadow),
    0 0 28px rgba(147, 193, 82, 0.10);
}

@keyframes viimatechPerimeterSpot {
  0% {
    opacity: 0;
    transform: rotate(0turn);
    filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
  }

  8% {
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(167, 217, 98, 0.45))
      drop-shadow(0 0 18px rgba(167, 217, 98, 0.24));
  }

  85% {
    opacity: 1;
    transform: rotate(0.95turn);
    filter:
      drop-shadow(0 0 8px rgba(167, 217, 98, 0.45))
      drop-shadow(0 0 18px rgba(167, 217, 98, 0.24));
  }

  100% {
    opacity: 0.18;
    transform: rotate(1turn);
    filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight::before {
    animation: none;
    opacity: 0;
  }
}


/* v9 override: perimeter bright spot sweeps once, then leaves a clearly brighter active perimeter until reset */
.visual-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  background: conic-gradient(
    from -90deg,
    rgba(147, 193, 82, 0) 0deg,
    rgba(147, 193, 82, 0) 332deg,
    rgba(167, 217, 98, 0.22) 340deg,
    rgba(210, 247, 130, 1) 348deg,
    rgba(167, 217, 98, 0.50) 355deg,
    rgba(147, 193, 82, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transform: rotate(0turn);
  filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
}

.visual-card::after {
  transition: border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.visual-card.signal-highlight::before {
  opacity: 1;
  animation: viimatechPerimeterFollowAndSettle 2.35s linear 1 forwards;
}

.visual-card.signal-highlight::after {
  opacity: 1;
  inset: 0;
  border-width: 2px;
  border-color: rgba(167, 217, 98, 0.76);
  box-shadow:
    0 0 0 1px rgba(167, 217, 98, 0.18),
    0 0 24px rgba(167, 217, 98, 0.30),
    0 0 64px rgba(167, 217, 98, 0.18),
    inset 0 0 30px rgba(167, 217, 98, 0.11);
  animation: none;
}

.visual-card.signal-highlight {
  border-color: rgba(167, 217, 98, 0.54);
  box-shadow: var(--shadow), 0 0 38px rgba(167, 217, 98, 0.12);
}

@keyframes viimatechPerimeterFollowAndSettle {
  0% {
    opacity: 0;
    transform: rotate(0turn);
    filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
  }
  6% {
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(167, 217, 98, 0.56))
      drop-shadow(0 0 24px rgba(167, 217, 98, 0.30));
  }
  88% {
    opacity: 1;
    transform: rotate(0.98turn);
    filter:
      drop-shadow(0 0 10px rgba(167, 217, 98, 0.56))
      drop-shadow(0 0 24px rgba(167, 217, 98, 0.30));
  }
  100% {
    opacity: 0;
    transform: rotate(1turn);
    filter: drop-shadow(0 0 0 rgba(167, 217, 98, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight::before {
    animation: none;
    opacity: 0;
  }
}


/* v10 override: bright spot follows the card perimeter path instead of orbiting */
.visual-card {
  position: relative;
  overflow: hidden;
}

.visual-card::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(circle, rgba(236,255,188,1) 0%, rgba(191,235,102,0.98) 34%, rgba(167,217,98,0.78) 58%, rgba(167,217,98,0.18) 76%, rgba(167,217,98,0) 100%);
  box-shadow:
    0 0 6px rgba(236,255,188,0.95),
    0 0 14px rgba(167,217,98,0.85),
    0 0 26px rgba(167,217,98,0.52);
  left: 1.75rem;
  top: 1px;
  transform: translate(-50%, -50%);
}

.visual-card.signal-highlight::before {
  opacity: 1;
  animation: viimatechPerimeterPathSpot 2.25s linear 1 forwards;
}

.visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(147, 193, 82, 0);
  box-shadow: none;
  opacity: 0;
  transition: border-color 260ms ease, box-shadow 260ms ease, opacity 260ms ease;
}

.visual-card.signal-highlight::after {
  opacity: 1;
  border-width: 2px;
  border-color: rgba(172, 219, 95, 0.76);
  box-shadow:
    0 0 0 1px rgba(172, 219, 95, 0.18),
    0 0 20px rgba(172, 219, 95, 0.28),
    0 0 56px rgba(172, 219, 95, 0.16),
    inset 0 0 26px rgba(172, 219, 95, 0.08);
  animation: none;
}

.visual-card.signal-highlight {
  border-color: rgba(172, 219, 95, 0.42);
  box-shadow: var(--shadow), 0 0 34px rgba(172, 219, 95, 0.10);
}

@keyframes viimatechPerimeterPathSpot {
  0% {
    left: 1.75rem;
    top: 1px;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    left: calc(100% - 1.75rem);
    top: 1px;
    opacity: 1;
  }
  28% {
    left: calc(100% - 1px);
    top: 1.75rem;
    opacity: 1;
  }
  49% {
    left: calc(100% - 1px);
    top: calc(100% - 1.75rem);
    opacity: 1;
  }
  53% {
    left: calc(100% - 1.75rem);
    top: calc(100% - 1px);
    opacity: 1;
  }
  74% {
    left: 1.75rem;
    top: calc(100% - 1px);
    opacity: 1;
  }
  78% {
    left: 1px;
    top: calc(100% - 1.75rem);
    opacity: 1;
  }
  96% {
    left: 1px;
    top: 1.75rem;
    opacity: 1;
  }
  100% {
    left: 1.75rem;
    top: 1px;
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .visual-card::before {
    width: 12px;
    height: 12px;
    left: 1.25rem;
  }

  @keyframes viimatechPerimeterPathSpot {
    0% {
      left: 1.25rem;
      top: 1px;
      opacity: 0;
    }
    4% { opacity: 1; }
    24% {
      left: calc(100% - 1.25rem);
      top: 1px;
      opacity: 1;
    }
    28% {
      left: calc(100% - 1px);
      top: 1.25rem;
      opacity: 1;
    }
    49% {
      left: calc(100% - 1px);
      top: calc(100% - 1.25rem);
      opacity: 1;
    }
    53% {
      left: calc(100% - 1.25rem);
      top: calc(100% - 1px);
      opacity: 1;
    }
    74% {
      left: 1.25rem;
      top: calc(100% - 1px);
      opacity: 1;
    }
    78% {
      left: 1px;
      top: calc(100% - 1.25rem);
      opacity: 1;
    }
    96% {
      left: 1px;
      top: 1.25rem;
      opacity: 1;
    }
    100% {
      left: 1.25rem;
      top: 1px;
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight::before {
    animation: none;
    opacity: 0;
  }
}


/* v11 override: sharp anti-clockwise bright spot exactly on the perimeter line */
.visual-card::before,
.visual-card::after {
  display: none !important;
  content: none !important;
}

.visual-card {
  position: relative;
  overflow: hidden;
}

.perimeter-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.perimeter-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.visual-card > *:not(.perimeter-anim) {
  position: relative;
  z-index: 2;
}

.perimeter-base,
.perimeter-trail,
.perimeter-spot {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perimeter-base {
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1.6;
}

.perimeter-trail {
  stroke: rgba(182, 229, 103, 0.96);
  stroke-width: 2.2;
  stroke-dasharray: 0 1000;
  filter: drop-shadow(0 0 4px rgba(214, 247, 142, 0.48)) drop-shadow(0 0 10px rgba(167, 217, 98, 0.28));
  opacity: 0;
}

.perimeter-spot {
  stroke: rgba(240, 255, 196, 1);
  stroke-width: 3.1;
  stroke-dasharray: 20 980;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(240, 255, 196, 0.96)) drop-shadow(0 0 14px rgba(190, 236, 109, 0.82)) drop-shadow(0 0 26px rgba(167, 217, 98, 0.46));
  opacity: 0;
}

.visual-card.signal-highlight .perimeter-trail {
  opacity: 1;
  animation: viimatechTrailBuildAnti 2.35s linear 1 forwards;
}

.visual-card.signal-highlight .perimeter-spot {
  opacity: 1;
  animation: viimatechSpotFollowAnti 2.35s linear 1 forwards;
}

.visual-card.signal-highlight {
  border-color: rgba(181, 228, 104, 0.48);
  box-shadow: var(--shadow), 0 0 30px rgba(167, 217, 98, 0.10);
}

@keyframes viimatechTrailBuildAnti {
  0% {
    stroke-dasharray: 0 1000;
    opacity: 1;
  }
  100% {
    stroke-dasharray: 1000 0;
    opacity: 1;
  }
}

@keyframes viimatechSpotFollowAnti {
  0% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  90% {
    stroke-dashoffset: -980;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card.signal-highlight .perimeter-trail,
  .visual-card.signal-highlight .perimeter-spot {
    animation: none;
  }

  .perimeter-trail {
    stroke-dasharray: 1000 0;
    opacity: 1;
  }

  .perimeter-spot {
    opacity: 0;
  }
}


/* v12 override: align SVG highlight with actual outer graph perimeter */
.perimeter-anim {
  inset: 0;
  z-index: 4;
}

.perimeter-svg {
  overflow: visible;
}

.perimeter-base {
  stroke: transparent;
  stroke-width: 0;
}

.perimeter-trail {
  stroke-width: 2.6;
  stroke: rgba(182, 229, 103, 0.98);
  filter:
    drop-shadow(0 0 5px rgba(214, 247, 142, 0.55))
    drop-shadow(0 0 12px rgba(167, 217, 98, 0.32));
}

.perimeter-spot {
  stroke-width: 3.6;
  stroke-dasharray: 18 982;
  stroke: rgba(245, 255, 205, 1);
  filter:
    drop-shadow(0 0 7px rgba(245, 255, 205, 1))
    drop-shadow(0 0 16px rgba(190, 236, 109, 0.90))
    drop-shadow(0 0 30px rgba(167, 217, 98, 0.50));
}

.visual-card.signal-highlight {
  border-color: rgba(182, 229, 103, 0.50);
}


/* v13: Norenvia white-background logo in reference bar */
.logo-row .norenvia-logo-strip-white {
  background: #ffffff;
}

.logo-row .norenvia-logo-strip-white img {
  max-height: 54px;
  max-width: 92%;
  object-fit: contain;
}