@charset "UTF-8";
/* ===========================================
   VANGUARD ACADEMY — ESTILOS
   =========================================== */


/* ======================== VARIABLES ======================== */
:root {
  /* ── Paleta completa ───────────────────── */

  /* Primary: Matrix Green */
--matrix-green-50: #e5ffe6;
--matrix-green-100: #c6ffc9;
--matrix-green-200: #93ff9a;
--matrix-green-300: #55ff64;
--matrix-green-400: #22f937;
--matrix-green-500: #03e21d;
--matrix-green-600: #00b318;
--matrix-green-700: #048718;
--matrix-green-800: #0a6a19;
--matrix-green-900: #0d5a1b; 
--matrix-green-950: #01320b;

    /* Primary: Lime Green */
--lime-green-50: #f8ffe5;
--lime-green-100: #efffc6;
--lime-green-200: #deff93;
--lime-green-300: #c9ff55;
--lime-green-400: #b1f922;
--lime-green-500: #94e203;
--lime-green-600: #71b300;
--lime-green-700: #558704;
--lime-green-800: #446a0a;
--lime-green-900: #3a5a0d;
--lime-green-950: #1c3201;

  /* Secondary: Edgerunner Purple */
  --edgerunner-purple-50:  #f3f1ff;
  --edgerunner-purple-100: #e9e5ff;
  --edgerunner-purple-200: #d4ccff;
  --edgerunner-purple-300: #b8acff;
  --edgerunner-purple-400: #a78bfa;
  --edgerunner-purple-500: #8b5cf6;
  --edgerunner-purple-600: #7c3aed;
  --edgerunner-purple-700: #6d28d9;
  --edgerunner-purple-800: #4c1d95;
  --edgerunner-purple-900: #3b1678;
  --edgerunner-purple-950: #1e0a47;

  /* Tertiary: Cyber Pink */
  --cyber-pink-50:  #fdf2f8;
  --cyber-pink-100: #fce7f3;
  --cyber-pink-200: #fbcfe8;
  --cyber-pink-300: #f9a8d4;
  --cyber-pink-400: #f472b6;
  --cyber-pink-500: #ec4899;
  --cyber-pink-600: #db2777;
  --cyber-pink-700: #be185d;
  --cyber-pink-800: #9d174d;
  --cyber-pink-900: #831843;
  --cyber-pink-950: #500724;

  /* Neutrals: Carbon Grey */
  --carbon-grey-50:  #fafafa;
  --carbon-grey-100: #f5f4f5;
  --carbon-grey-200: #e7e3e8;
  --carbon-grey-300: #d8d2da;
  --carbon-grey-350: #beb1c3;
  --carbon-grey-400: #a99dae;
  --carbon-grey-500: #7e7283;
  --carbon-grey-600: #5a4e5f;
  --carbon-grey-700: #453c49;
  --carbon-grey-800: #2a262b;
  --carbon-grey-900: #1a161b;
  --carbon-grey-950: #0b080c;

  /* System & Decorations – Success: Implant Turquoise */
  --implant-turquoise-50:  #ebffff;
  --implant-turquoise-100: #cdfdff;
  --implant-turquoise-200: #a1f7ff;
  --implant-turquoise-300: #61efff;
  --implant-turquoise-400: #09daf6;
  --implant-turquoise-500: #00bfdd;
  --implant-turquoise-600: #0198b9;
  --implant-turquoise-700: #097995;
  --implant-turquoise-800: #116179;
  --implant-turquoise-900: #135066;
  --implant-turquoise-950: #053547;

  /*Amber Orange*/
  --amber-orange-50:  #fff7ed;
  --amber-orange-100: #ffedd5;
  --amber-orange-200: #fed7aa;
  --amber-orange-300: #fdba74;
  --amber-orange-400: #fb923c;
  --amber-orange-500: #e36b02;
  --amber-orange-600: #b45309;
  --amber-orange-700: #9a3412;
  --amber-orange-800: #7c2d12;
  --amber-orange-900: #6b210f;
  --amber-orange-950: #431407;

    /*Electric Blue*/
  --electric-Blue-50:  #e6f4ff;
  --electric-Blue-100: #cce9ff;
  --electric-Blue-200: #99d4ff;
  --electric-Blue-300: #66bfff;
  --electric-Blue-400: #339aff;
  --electric-Blue-500: #3B9EFF;
  --electric-Blue-600: #0077e6;
  --electric-Blue-700: #0059b3;
  --electric-Blue-800: #004080;
  --electric-Blue-900: #00264d;
  --electric-Blue-950: #001326;

  /* System – Alert: Danger Yellow */
  --danger-yellow-50:  #fdffe7;
  --danger-yellow-100: #f9ffc1;
  --danger-yellow-200: #f8ff86;
  --danger-yellow-300: #fbff41;
  --danger-yellow-400: #fff80d;
  --danger-yellow-500: #ffea00;
  --danger-yellow-600: #d1ae00;
  --danger-yellow-700: #a67d02;
  --danger-yellow-800: #89610a;
  --danger-yellow-900: #744f0f;
  --danger-yellow-950: #442a04;

  /* System – Problem: Attack Red */
  --attack-red-50:  #fff0f1;
  --attack-red-100: #ffdde0;
  --attack-red-200: #ffc0c5;
  --attack-red-300: #ff949d;  
  --attack-red-400: #ff5765;
  --attack-red-500: #ff2336;
  --attack-red-600: #ff0a1f;
  --attack-red-700: #d70012;
  --attack-red-800: #b10312;
  --attack-red-900: #920a16;
  --attack-red-950: #500007;

  /* Web Background */
  --ultraviolet-50: #4c369b;
  --ultraviolet-100: #4a2895;
  --ultraviolet-200: #41248a;
  --ultraviolet-300: #3a1e76;
  --ultraviolet-400: #381d67;
  --ultraviolet-500: #3d1e67;
  --ultraviolet-600: #391d57;
  --ultraviolet-700: #341e48;
  --ultraviolet-800: #271736;
  --ultraviolet-900: #120c1a;
  --ultraviolet-950: #0d0712;

  /* ── Tokens semánticos ─────────────────── */

  --purple:        var(--edgerunner-purple-500); /* use for icons, UI highlights */
  --purple-text:   var(--edgerunner-purple-200); /* use for body text, links */
  --purple-strong: var(--edgerunner-purple-600); /* decorative only: glows, borders, backgrounds */
  --purple-dim:    rgba(124, 58, 237, 0.12);

  --pink:          var(--cyber-pink-500);                        /* rosa ácido — acento cálido par 2 */
  --pink-text:     var(--cyber-pink-200);        /* AA: body text, links */
  --pink-strong:   var(--cyber-pink-600);        /* decorative only: glows, neon borders */
  --pink-dim:      rgba(201, 27, 98, 0.12);

  --blue:          var(--electric-Blue-500);                     /* azul eléctrico — acento frío par 1 */
  --blue-text:     var(--electric-Blue-200);  
  --blue-strong:   var(--electric-Blue-600);                     /* AA: body text, links */
  --blue-dim:      rgba(59, 158, 255, 0.12);

  --orange:        var(--amber-orange-500);                      /* naranja ámbar — acento cálido par 2 */
  --orange-text:   var(--amber-orange-200);      
  --orange-strong: var(--amber-orange-600);      
  --orange-dim:    rgba(196, 92, 0, 0.12);

  --green:         var(--matrix-green-500);
  --green-dim:     rgba(34, 249, 55, 0.12);
  --green-text:    var(--matrix-green-200); /* use for body text, links */
  --green-text-dim: var(--matrix-green-600); /* use for muted text, secondary links */

  --gradient-green: linear-gradient(135deg, var(--matrix-green-400), var(--matrix-green-200)); /* matrix dark → light */

  /* Fondos */
  --bg:      var(--ultraviolet-950);
  --bg-2:    var(--carbon-grey-950);
  --bg-3:    var(--ultraviolet-900);
  --bg-card: rgba(11, 8, 12, 0.9);

  /* Fondos de sección alternantes */
  --bg-primary-start-color: var(--ultraviolet-900);
  --bg-primary-end-color:   var(--ultraviolet-950);
  --bg-alt-start-color:     var(--carbon-grey-950);
  --bg-alt-end-color:       var(--carbon-grey-950);

  /* Bordes */
  --border:     rgba(130, 41, 255, 0.22);
  --border-sub: rgba(255, 255, 255, 0.05);

  /* Texto — contraste WCAG AA sobre --bg (#09060d) */
  --text:       var(--carbon-grey-50);
  --text-muted: var(--carbon-grey-300);
  --text-dim:   var(--carbon-grey-400); /* 7.7:1 sobre --bg — usado en mcat-stat-card__num / mring__pct para "proximamente" (0%) */

  /* Feedback del sistema */
  --color-error:   var(--attack-red-400);        
  --color-success: var(--matrix-green-200);    
  --color-warning: var(--danger-yellow-400);     

  /* Tipografía */
  --ff-display: 'Orbitron', sans-serif;
  --ff-ui:      'Barlow Semi Condensed', sans-serif;
  --ff-body:    'Exo 2', sans-serif;

  /* Layout */
  --radius:      6px;
  --radius-lg:   10px;
  --t:           0.25s ease;
  --section-pad: clamp(4rem, 8vw, 8rem);
  --container:   1180px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 100%; /* base rem = 16px; ajustable con clases .font-md/.font-lg */
  scroll-behavior: smooth;
}

/* ======================== ACCESIBILIDAD TIPOGRÁFICA ======================== */

/* Escalas de tamaño — modifican la base rem, todos los valores rem escalan con ellas */
html.font-md { font-size: 112.5%; } /* +12.5% */
html.font-lg { font-size: 125%;   } /* +25%   */

/* OpenDyslexic — fuente local para modo de accesibilidad */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../assets/fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../assets/fonts/OpenDyslexic-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../assets/fonts/OpenDyslexic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../assets/fonts/OpenDyslexic-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Modo OpenDyslexic — sustituye las tres familias tipográficas */
html.dyslexic {
  --ff-display: 'OpenDyslexic', sans-serif;
  --ff-ui:      'OpenDyslexic', sans-serif;
  --ff-body:    'OpenDyslexic', sans-serif;
}
html.dyslexic body {
  line-height: 1.9;
  word-spacing: 0.12em;
}

/* Barra de accesibilidad tipográfica */
.a11y-bar {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(9, 6, 13, 0.93);
  border: 1px solid rgba(130, 41, 255, 0.28);
  border-radius: var(--radius-lg);
  padding: 0.4rem 0.55rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.a11y-bar__toggle {
  font-family: var(--ff-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding-right: 0.25rem;
  border-right: 1px solid rgba(130, 41, 255, 0.2);
  margin-right: 0.1rem;
  user-select: none;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: none;
  cursor: default;
}

/* En móvil, la barra arranca colapsada para no tapar contenido debajo:
   solo el toggle "Aa" es tocable hasta que se expande. */
@media (max-width: 640px) {
  .a11y-bar__toggle {
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
  }
  .a11y-bar:not(.a11y-bar--open) .a11y-btn,
  .a11y-bar:not(.a11y-bar--open) .a11y-sep {
    display: none;
  }
}
.a11y-btn {
  background: transparent;
  border: 1px solid rgba(130, 41, 255, 0.18);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.55rem 0.6rem;
  transition: var(--t);
  user-select: none;
  min-width: 2.2rem;
  min-height: 2.2rem;
  text-align: center;
}
.a11y-btn:hover {
  border-color: var(--purple-strong);
  color: var(--text);
  background: var(--purple-dim);
}
.a11y-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.a11y-btn[aria-pressed="true"] {
  background: var(--purple-dim);
  border-color: var(--purple-strong);
  color: var(--purple);
}
.a11y-btn--active {
  background: var(--purple-dim);
  border-color: var(--purple-strong);
  color: var(--purple);
}
.a11y-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.a11y-sep {
  width: 1px;
  height: 1.2rem;
  background: rgba(130, 41, 255, 0.2);
  flex-shrink: 0;
  margin: 0 0.1rem;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.015em;
  overflow-x: hidden;
}

/* Grid de fondo decorativa */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 249, 55, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 249, 55, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

/* Scanlines */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.07) 0px,
    rgba(0,0,0,0.07) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--ff-display); line-height: 1.1; }
h2 { text-transform: uppercase; }

/* --- Accesibilidad: Skip link --- */
.skip-link {
  position: absolute;
  top: -200%;
  left: 1rem;
  z-index: 10000;
  background: var(--purple-strong);
  color: var(--carbon-grey-50);
  padding: 0.6rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* --- Focus visible global --- */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* --- Utilidades --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.text--purple { color: var(--purple-text); }
.text--pink   { color: var(--pink-text);   }
.text--blue   { color: var(--blue-text);   }
.text--green {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text--light-green {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Animación: Scroll Reveal ---
   .reveal solo (sin modificador) = fade + rise, el comportamiento por
   defecto de siempre, ahora con un easing más "premium" (expo-out en vez
   de ease lineal-ish). Añadir una clase modificadora en el HTML para una
   entrada distinta — todas comparten el mismo trigger (IntersectionObserver
   en main.js añade .visible una vez, no hace falta tocar el JS por variante):
     reveal--left   → entra deslizando desde la izquierda
     reveal--right  → entra deslizando desde la derecha
     reveal--scale  → entra con un ligero zoom-in
     reveal--blur   → entra desenfocado y enfoca al aparecer
*/
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.92); }
.reveal--left.visible,
.reveal--right.visible,
.reveal--scale.visible {
  transform: none;
}

.reveal--blur {
  transform: translateY(12px);
  filter: blur(10px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--blur.visible {
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ======================== BOTONES — CYBERPUNK GLITCH ======================== */
/*
 * Forma tomada de assets/images/SVG/buttons (vg-button-fill-*.svg / vg-button-line-*.svg),
 * aplicada como mask-image (conserva los recortes y el detalle técnico del SVG a
 * cualquier ancho de botón).
 *
 * Cada asset está dibujado a una proporción nativa distinta:
 *   small 239.76×82.15 (2.92:1) · medium 389.76×82.15 (4.74:1)
 *   wide  799.76×82.16 (9.74:1) · wider 1129.76×82.16 (13.75:1)
 * porque el recorte técnico de las esquinas se deforma si se estira UNA sola
 * forma a cualquier ancho: un botón angosto con la forma "wider" aplana los
 * cortes hasta volverlos casi invisibles (justo el bug del botón de envío en
 * el formulario móvil). .alfa-form declara container-type:inline-size, así
 * que las @container de abajo eligen el asset cuya proporción nativa está
 * más cerca del ancho REAL del botón dentro del formulario, en vez de fiarse
 * del viewport. Los botones de ancho automático (hero / banner / CTA) se
 * quedan en "medium" — su ancho ya se fuerza a un valor consistente más abajo
 * (.hero__actions .btn { min-width }) precisamente para casar con esa forma.
 *
 * ::before = capa de sombra desplazada (z-index:-1)
 * ::after  = capa de relleno (z-index:-1)
 * .btn__glitch = overlay con clip-path animado en hover, recortado con el SVG "line" (solo borde)
 */

.btn {
  /* ── Forma cyberpunk (SVG), un juego de variables por tamaño ─────────── */
  --btn-shape-fill-small:  url("../assets/images/SVG/buttons/vg-button-fill-small.svg");
  --btn-shape-fill-medium: url("../assets/images/SVG/buttons/vg-button-fill-medium.svg");
  --btn-shape-fill-wide:   url("../assets/images/SVG/buttons/vg-button-fill-wide.svg");
  --btn-shape-fill-wider:  url("../assets/images/SVG/buttons/vg-button-fill-wider.svg");
  --btn-shape-line-small:  url("../assets/images/SVG/buttons/vg-button-line-small.svg");
  --btn-shape-line-medium: url("../assets/images/SVG/buttons/vg-button-line-medium.svg");
  --btn-shape-line-wide:   url("../assets/images/SVG/buttons/vg-button-line-wide.svg");
  --btn-shape-line-wider:  url("../assets/images/SVG/buttons/vg-button-line-wider.svg");
  /* tamaño activo — "medium" por defecto; las @container de abajo lo suben
     o bajan según el ancho real del contenedor (ver .alfa-form) */
  --btn-shape:      var(--btn-shape-fill-medium);
  --btn-shape-ring: var(--btn-shape-line-medium);
  --clip-one:   polygon(0 2%,  100% 2%,  100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two:   polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four:  polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five:  polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six:   polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  /* ── Tokens de color (sobrescritos por variante) */
  --btn-bg:      rgba(34, 249, 55, 0.04);
  --btn-shadow:  rgba(34, 249, 55, 0.25);
  --btn-color:   var(--text);
  --btn-border:  3px;
  --btn-mask-size: 100% 100%;
  --shimmy-distance: 5;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 2rem;
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  isolation: isolate;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  color: var(--btn-color);
}

/* Umbrales calculados sobre la altura fija del botón (~52px): el punto en el
   que la proporción nativa de cada asset (2.92 / 4.74 / 9.74 / 13.75) queda
   más cerca del recuadro real que la del asset vecino. Solo tienen efecto
   dentro de un contenedor con container-type (.alfa-form); en cualquier otro
   sitio (sin container-type en ningún antecesor) estas reglas no aplican y
   .btn se queda en el "medium" de arriba. */
@container (max-width: 219.98px) {
  .btn {
    --btn-shape:      var(--btn-shape-fill-small);
    --btn-shape-ring: var(--btn-shape-line-small);
  }
}
@container (min-width: 430px) {
  .btn {
    --btn-shape:      var(--btn-shape-fill-wide);
    --btn-shape-ring: var(--btn-shape-line-wide);
  }
}
@container (min-width: 680px) {
  .btn {
    --btn-shape:      var(--btn-shape-fill-wider);
    --btn-shape-ring: var(--btn-shape-line-wider);
  }
}

/* Capa de sombra / borde desplazado */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-shadow);
  transform: translate(var(--btn-border), 0);
  -webkit-mask-image: var(--btn-shape);
  mask-image: var(--btn-shape);
  -webkit-mask-size: var(--btn-mask-size);
  mask-size: var(--btn-mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -1;
}

/* Capa de relleno */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-bg);
  -webkit-mask-image: var(--btn-shape);
  mask-image: var(--btn-shape);
  -webkit-mask-size: var(--btn-mask-size);
  mask-size: var(--btn-mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -1;
}

/* Overlay de glitch — hijo .btn__glitch, recortado con la silueta del SVG "line" */
.btn__glitch {
  position: absolute;
  inset: calc(var(--btn-border) * -1);
  display: none; /* visible solo en hover */
  align-items: center;
  justify-content: center;
  background: var(--btn-shadow);
  color: var(--btn-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  -webkit-mask-image: var(--btn-shape-ring);
  mask-image: var(--btn-shape-ring);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  text-shadow: 2px 2px var(--btn-shadow), -2px -2px var(--matrix-green-100);
  animation: btn-glitch 2s infinite;
  pointer-events: none;
}

.btn:hover .btn__glitch { display: flex; }

/* Sin animación al navegar con teclado */
.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.btn:focus-visible .btn__glitch { display: none; }

@keyframes btn-glitch {
  0%             { clip-path: var(--clip-one); }
  2%,  8%        { clip-path: var(--clip-two);   transform: translate(calc(var(--shimmy-distance) * -1%), 0); }
  6%             { clip-path: var(--clip-two);   transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  9%             { clip-path: var(--clip-two);   transform: translate(0, 0); }
  10%            { clip-path: var(--clip-three); transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  13%            { clip-path: var(--clip-three); transform: translate(0, 0); }
  14%, 21%       { clip-path: var(--clip-four);  transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  25%            { clip-path: var(--clip-five);  transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  30%            { clip-path: var(--clip-five);  transform: translate(calc(var(--shimmy-distance) * -1%), 0); }
  35%, 45%       { clip-path: var(--clip-six);   transform: translate(calc(var(--shimmy-distance) * -1%)); }
  40%            { clip-path: var(--clip-six);   transform: translate(calc(var(--shimmy-distance) * 1%)); }
  50%            { clip-path: var(--clip-six);   transform: translate(0, 0); }
  55%            { clip-path: var(--clip-seven); transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  60%            { clip-path: var(--clip-seven); transform: translate(0, 0); }
  31%, 61%, 100% { clip-path: var(--clip-four); }
}

/* Variante: primario — par matrix green → lime green */
.btn--primary {
  --btn-bg:     var(--gradient-green);
  --btn-shadow: var(--matrix-green-600);
  --btn-color:  var(--edgerunner-purple-950); /* #1e0a47 — contraste ~9:1 */
  font-weight: 700;
}

/* Variante: outline cyber-pink (sin relleno) — usa el SVG "line" como única
   forma, en el mismo tamaño que ya haya elegido la @container de arriba */
.btn--ghost {
  --btn-shape:  var(--btn-shape-ring);
  --btn-bg:     var(--green);
  --btn-shadow: var(--green);
  --btn-color:  var(--carbon-grey-200);
  --btn-border: 5px;
  filter: drop-shadow(0 0 5px rgba(147, 255, 128, 0.85));
}

/* El SVG "line" ya es un contorno hueco: no hace falta la capa de sombra duplicada */
.btn--ghost::before {
  display: none;
}

.btn--ghost:hover {
  filter: drop-shadow(0 0 10px rgba(128, 255, 134, 0.5));
}

.btn--full { width: 100%; }

/* ======================== LOGOS ======================== */
.nav__logo-img {
  display: block;
  height: 12px;
  width: auto;
}

@media (min-width: 1180px) {
  .nav__logo-img { height: 13px; }
}

.hero__logo-img {
  display: block;
  width: min(800px, 52.5vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35));
}

/* ≤600px: <picture> resuelve al isotipo apilado (logo-hero-mobile.svg,
   134.12×91.43 — icono sobre "VANGUARD" sobre "ACADEMY") en vez del
   lockup horizontal ancho, pensado para leerse a un tamaño mayor en
   una pantalla estrecha. Ancho propio (no el 52.5vw del lockup ancho,
   pensado para una proporción ~3.2:1) + aspect-ratio explícito evitan
   que el hueco reservado por el width/height del <img> (medidos sobre
   el lockup de escritorio) salte de tamaño al cargar la fuente móvil. */
@media (max-width: 600px) {
  .hero__logo-img {
    width: min(230px, 48vw);
    aspect-ratio: 134.12 / 91.43;
  }
}

/* Glitch constante muy sutil — solo si el usuario no prefiere reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo-img {
    animation: logoGlitch 9s linear infinite;
  }
}

@keyframes logoGlitch {
  0%, 85%  {
    transform: none; opacity: 1; clip-path: none;
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35));
  }
  86% {
    transform: translateX(6px); opacity: 0.8;
    clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35))
            drop-shadow(-4px 0 0 rgba(236, 72, 153, 0.7));
  }
  87% {
    transform: translateX(-5px); opacity: 1;
    clip-path: polygon(0 38%, 100% 38%, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35))
            drop-shadow(4px 0 0 rgba(139, 92, 246, 0.7));
  }
  88% {
    transform: translateX(3px); opacity: 0.85;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 62%);
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35))
            drop-shadow(-2px 0 0 rgba(236, 72, 153, 0.5));
  }
  89% {
    transform: translateX(-2px); opacity: 1; clip-path: none;
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35));
  }
  90%, 100% {
    transform: none; opacity: 1; clip-path: none;
    filter: drop-shadow(0 0 24px rgba(93, 199, 10, 0.35));
  }
}

.footer__logo-img {
  display: block;
  height: 2rem;
  width: auto;
  margin: 0 auto 0.75rem;
  opacity: 0.85;
}

/* ======================== MATERIAL ICONS OUTLINE ======================== */
.feature-card__icon .material-icons-outlined {
  font-size: 2.4rem;
  color: var(--card-glow, var(--purple));
}

/* ======================== NAV ======================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.25rem;
  background: rgba(9, 6, 13, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-sub);
  transition: var(--t);
}
.nav.scrolled {
  border-bottom-color: rgba(130, 41, 255, 0.18);
  box-shadow: 0 2px 30px rgba(130, 41, 255, 0.08);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Nav links: ocultos en móvil (mobile-first) */
.nav__links {
  display: none;
  list-style: none;
}
.nav__link {
  font-family: var(--ff-ui);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t);
}
.nav__link:hover { color: var(--text); }
.nav__link:not(.nav__link--cta) {
  position: relative;
}
.nav__link:not(.nav__link--cta)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform var(--t);
  transform-origin: left;
}
.nav__link:not(.nav__link--cta):hover::after {
  transform: scaleX(1);
}
/* Página actual — aria-current="page" lo marca js/main.js */
.nav__link[aria-current="page"] {
  color: var(--text);
}
.nav__link[aria-current="page"]:not(.nav__link--cta)::after {
  transform: scaleX(1);
}
.nav__link--cta {
  position: relative;
  isolation: isolate;
  padding: 0.6rem 2.2rem;
  white-space: nowrap;
  border: none;
  background: none;
  color: var(--carbon-grey-50);
  flex-shrink: 0;
  /* clip-path frames + shimmy for the hover glitch overlay below —
     identical values to .btn's, just scoped here since this component
     doesn't carry the .btn class */
  --clip-one:   polygon(0 2%,  100% 2%,  100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two:   polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four:  polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five:  polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six:   polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  --shimmy-distance: 5;
}

/* Decorative ring layer: same ghost-outline SVG as .btn--ghost, filled
   with a rotating orange→pink→purple underglow (same --glow-angle /
   form-glow-spin as .alfa__form-wrap) — always spinning at rest so the
   CTA pops, not just on hover. Living on ::before — not the link itself
   — means the mask only clips this decorative layer, not the button's
   own text. */
.nav__link--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from var(--glow-angle), var(--orange), var(--pink), var(--purple), var(--orange));
  animation: form-glow-spin 4s linear infinite;
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC00MWUyOGUwNC1mNjQwLTQ2MTUtOTdmOC05ODgwOTU2YzI5ZmIiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODkuNzYgODIuMTUiPgogIDxnIGlkPSJ1dWlkLTBkNDg2ZTNkLWZjYTEtNDFmZC04MjVlLTVmMGRlYjdlYWI2MCIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Ik0zNzguOTMsMnY1Mi4wMmwxLjA0LjU3LDcuNzksNC4yNnY1LjI5bC05LjYsMTYuMDJoLTE0Ljg0bDIuNjgtNC4xMiwyLjAxLTMuMDloLTEyMS4zNmwtLjYuODUtNC40Nyw2LjM2aC03LjY2di03LjI3SDI3LjZsLS42Ljc0LTMuNTYsNC40MUgyVjIzLjkyTDIyLjg0LDIuMTNoMjIwLjQzbDkuODQsNy45NS41NS40NGg2OS44OWwuNTMtLjM5LDEwLjk5LTguMTNoNDMuODZNMzgwLjkzLDBoLTQ2LjUybC0xMS41Miw4LjUyaC02OC41MkwyNDMuOTguMTNIMjEuOTlMMCwyMy4xMnY1Ni45M2gyNC40bDQuMTYtNS4xNmgyMDMuMzd2Ny4yN2gxMC43bDUuMDYtNy4yMWgxMTYuNjNsLTQuNyw3LjIxaDE5LjY2bDEwLjQ3LTE3LjQ3di03LjAzbC04LjgzLTQuODNWMGgwWiIvPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzA5LjEzLDc3LjNoMi40N2MuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMS4wNS4wOS4wOC4xOC4wOC4yOXYuNjVzMCwuMDgtLjAxLjExYzAsLjA0LS4wMi4wNy0uMDQuMTEuMDYuMDguMS4xNi4xMy4yMy4wMy4wNy4wNS4xNC4wNS4yMnYuNzFjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTkuMDgtLjI5LjA4aC0yLjZ2LTMuMThaTTMwOS43Miw3OC42M2gxLjg3cy4wNS0uMDEuMDctLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjYycy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDctLjAzaC0xLjg3cy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjYycy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaTTMwOS43Miw4MC4wMWgyLjAxcy4wNS0uMDEuMDgtLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjY4cy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDgtLjAzaC0yLjAxcy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjY4cy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxMy4wNyw4MC40MWMtLjA5LS4wNS0uMTYtLjEyLS4yMS0uMjFzLS4wOC0uMTgtLjA4LS4yOXYtMi42MWguNDh2Mi41OXMuMDEuMDYuMDMuMDhjLjAyLjAyLjA1LjAzLjA4LjAzaDIuMDFzLjA1LS4wMS4wOC0uMDNjLjAyLS4wMi4wMy0uMDUuMDMtLjA4di0yLjU5aC40OHYyLjYxYzAsLjExLS4wMy4yLS4wOC4yOS0uMDUuMDktLjEyLjE2LS4yMS4yMXMtLjE4LjA4LS4yOS4wOGgtMi4wM2MtLjExLDAtLjItLjAzLS4yOS0uMDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxNy42NCw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMSw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMy43Miw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMjMuNzQsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyNi44Miw4MC40OXYtMy4xOGguNTdsMi4xMywyLjU0di0yLjU0aC40OHYzLjE4aC0uNTdsLTIuMTMtMi41NHYyLjU0aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzMC40OCw4MC45N3YtLjQ4aDMuMTh2LjQ4aC0zLjE4WiIvPgogICAgICAgIDxwYXRoIGQ9Ik0zMzQuNzIsODAuNDljLS4xMSwwLS4yLS4wMy0uMjktLjA4cy0uMTYtLjEyLS4yMS0uMjFjLS4wNS0uMDktLjA4LS4xOC0uMDgtLjI5di0yLjAzYzAtLjExLjAzLS4yLjA4LS4yOS4wNS0uMDkuMTItLjE2LjIxLS4yMS4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjZ2LjQ4aC0yLjUzcy0uMDkuMDItLjEyLjA1Yy0uMDMuMDMtLjA1LjA3LS4wNS4xMnYxLjlzLjAyLjA5LjA1LjEyLjA3LjA1LjEyLjA1aDIuNTN2LjQ4aC0yLjZaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzOC4zNSw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMzguMzYsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0MS40NCw4MC40OXYtMy4xOGguNTdsMS4yMywxLjQ3LDEuMjMtMS40N2guNTd2My4xOGgtLjQ4di0yLjU0bC0xLjMyLDEuNTctMS4zMy0xLjU3djIuNTRoLS40OFoiLz4KICAgICAgICA8cGF0aCBkPSJNMzQ1LjU0LDgwLjQ5di0zLjE4aDIuNmMuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMXMuMDguMTguMDguMjl2Ljg5YzAsLjExLS4wMy4yLS4wOC4yOXMtLjEyLjE2LS4yMS4yMS0uMTkuMDgtLjI5LjA4aC0yLjEzdjEuMTRoLS40OFpNMzQ2LjEzLDc4Ljg3aDIuMDFzLjA1LDAsLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LS44N3MtLjAxLS4wNi0uMDMtLjA4Yy0uMDItLjAyLS4wNS0uMDMtLjA4LS4wM2gtMi4wMXMtLjA2LjAxLS4wOC4wM2MtLjAyLjAyLS4wMy4wNS0uMDMuMDh2Ljg3cy4wMS4wNS4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgIDwvZz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyNTMuOTEgODEuNjEgMjQ1LjM5IDgxLjYxIDI0OS4yOCA3NS45MyAyNTcuOCA3NS45MyAyNTMuOTEgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzMDIuMzQgODEuNjEgMjYzLjgyIDgxLjYxIDI2Ny43MSA3NS45MyAzMDYuMjMgNzUuOTMgMzAyLjM0IDgxLjYxIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjU3Ljk2IDgxLjYxIDI1NS40NCA4MS42MSAyNTkuMzMgNzUuOTMgMjYxLjg1IDc1LjkzIDI1Ny45NiA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjI2MS45NCA4MS42MSAyNTkuNDEgODEuNjEgMjYzLjMgNzUuOTMgMjY1LjgzIDc1LjkzIDI2MS45NCA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1My4zMSA4MS42MSAzNTAuNzkgODEuNjEgMzU0LjY4IDc1LjkzIDM1Ny4yIDc1LjkzIDM1My4zMSA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1Ny4yOSA4MS42MSAzNTQuNzYgODEuNjEgMzU4LjY1IDc1LjkzIDM2MS4xOCA3NS45MyAzNTcuMjkgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzODguMTEgNDYuNCAzODguMTEgNTQuOTIgMzgyLjQyIDUxLjAzIDM4Mi40MiA0Mi41MSAzODguMTEgNDYuNCIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzLjk3IDM4OC4xMSAzNi40OSAzODIuNDIgMzIuNiAzODIuNDIgLjA4IDM4OC4xMSAzLjk3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMzg4LjExIDQyLjM1IDM4OC4xMSA0NC44NyAzODIuNDIgNDAuOTkgMzgyLjQyIDM4LjQ2IDM4OC4xMSA0Mi4zNSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzOC4zNyAzODguMTEgNDAuOSAzODIuNDIgMzcuMDEgMzgyLjQyIDM0LjQ5IDM4OC4xMSAzOC4zNyIvPgogICAgICA8Zz4KICAgICAgICA8cmVjdCB4PSIzNTQuNzYiIHk9IjQuMjgiIHdpZHRoPSIxLjA3IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU2LjcxIiB5PSI0LjI4IiB3aWR0aD0iLjg2IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU5LjQxIiB5PSI0LjI4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2MS45MyIgeT0iNC4yOCIgd2lkdGg9Ii4zNyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NC4wNCIgeT0iNC4yOCIgd2lkdGg9Ii42OSIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NS40MSIgeT0iNC4yOCIgd2lkdGg9Ii43MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS4zMiIgeT0iNC4yOCIgd2lkdGg9Ii4yOCIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS45OCIgeT0iNC4yOCIgd2lkdGg9IjEuODYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzMuMjEiIHk9IjQuMjgiIHdpZHRoPSIuNTUiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNjYuNzQiIHk9IjQuMjgiIHdpZHRoPSIuNTQiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzUuNTkiIHk9IjQuMjgiIHdpZHRoPSIuMzYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzQ2LjU2LDE1LjY4bC0uMTctLjYyYzIuMTctLjU3LDMuNjgtMi41NCwzLjY4LTQuNzlzLTEuNTEtNC4yMS0zLjY4LTQuNzlsLjE3LS42MmMyLjQ1LjY1LDQuMTYsMi44Nyw0LjE2LDUuNDFzLTEuNzEsNC43Ni00LjE2LDUuNDFaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0My42OSwxNS42OGMtMi40NS0uNjUtNC4xNi0yLjg3LTQuMTYtNS40MXMxLjcxLTQuNzYsNC4xNi01LjQxbC4xNy42MmMtMi4xNy41Ny0zLjY4LDIuNTQtMy42OCw0Ljc5czEuNTEsNC4yMSwzLjY4LDQuNzlsLS4xNy42MloiLz4KICAgICAgICA8cmVjdCB4PSIzNDQuOCIgeT0iNy4xNCIgd2lkdGg9Ii42NSIgaGVpZ2h0PSI2LjI2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzQyIiB5PSI5Ljk0IiB3aWR0aD0iNi4yNiIgaGVpZ2h0PSIuNjUiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw0My44M3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDUxLjU1di0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgICAgPHBhdGggZD0iTTQuNTQsNTkuMjh2LTMuMDJsNS4xOS00LjIxYy45LjU0LDEuMDcuNjUsMS45NywxLjE5djMuMDJsLTUuMTksNC4yMWMtLjktLjU0LTEuMDctLjY1LTEuOTctMS4xOVoiLz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw2N3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDc0Ljczdi0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC00MWUyOGUwNC1mNjQwLTQ2MTUtOTdmOC05ODgwOTU2YzI5ZmIiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODkuNzYgODIuMTUiPgogIDxnIGlkPSJ1dWlkLTBkNDg2ZTNkLWZjYTEtNDFmZC04MjVlLTVmMGRlYjdlYWI2MCIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Ik0zNzguOTMsMnY1Mi4wMmwxLjA0LjU3LDcuNzksNC4yNnY1LjI5bC05LjYsMTYuMDJoLTE0Ljg0bDIuNjgtNC4xMiwyLjAxLTMuMDloLTEyMS4zNmwtLjYuODUtNC40Nyw2LjM2aC03LjY2di03LjI3SDI3LjZsLS42Ljc0LTMuNTYsNC40MUgyVjIzLjkyTDIyLjg0LDIuMTNoMjIwLjQzbDkuODQsNy45NS41NS40NGg2OS44OWwuNTMtLjM5LDEwLjk5LTguMTNoNDMuODZNMzgwLjkzLDBoLTQ2LjUybC0xMS41Miw4LjUyaC02OC41MkwyNDMuOTguMTNIMjEuOTlMMCwyMy4xMnY1Ni45M2gyNC40bDQuMTYtNS4xNmgyMDMuMzd2Ny4yN2gxMC43bDUuMDYtNy4yMWgxMTYuNjNsLTQuNyw3LjIxaDE5LjY2bDEwLjQ3LTE3LjQ3di03LjAzbC04LjgzLTQuODNWMGgwWiIvPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzA5LjEzLDc3LjNoMi40N2MuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMS4wNS4wOS4wOC4xOC4wOC4yOXYuNjVzMCwuMDgtLjAxLjExYzAsLjA0LS4wMi4wNy0uMDQuMTEuMDYuMDguMS4xNi4xMy4yMy4wMy4wNy4wNS4xNC4wNS4yMnYuNzFjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTkuMDgtLjI5LjA4aC0yLjZ2LTMuMThaTTMwOS43Miw3OC42M2gxLjg3cy4wNS0uMDEuMDctLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjYycy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDctLjAzaC0xLjg3cy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjYycy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaTTMwOS43Miw4MC4wMWgyLjAxcy4wNS0uMDEuMDgtLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjY4cy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDgtLjAzaC0yLjAxcy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjY4cy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxMy4wNyw4MC40MWMtLjA5LS4wNS0uMTYtLjEyLS4yMS0uMjFzLS4wOC0uMTgtLjA4LS4yOXYtMi42MWguNDh2Mi41OXMuMDEuMDYuMDMuMDhjLjAyLjAyLjA1LjAzLjA4LjAzaDIuMDFzLjA1LS4wMS4wOC0uMDNjLjAyLS4wMi4wMy0uMDUuMDMtLjA4di0yLjU5aC40OHYyLjYxYzAsLjExLS4wMy4yLS4wOC4yOS0uMDUuMDktLjEyLjE2LS4yMS4yMXMtLjE4LjA4LS4yOS4wOGgtMi4wM2MtLjExLDAtLjItLjAzLS4yOS0uMDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxNy42NCw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMSw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMy43Miw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMjMuNzQsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyNi44Miw4MC40OXYtMy4xOGguNTdsMi4xMywyLjU0di0yLjU0aC40OHYzLjE4aC0uNTdsLTIuMTMtMi41NHYyLjU0aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzMC40OCw4MC45N3YtLjQ4aDMuMTh2LjQ4aC0zLjE4WiIvPgogICAgICAgIDxwYXRoIGQ9Ik0zMzQuNzIsODAuNDljLS4xMSwwLS4yLS4wMy0uMjktLjA4cy0uMTYtLjEyLS4yMS0uMjFjLS4wNS0uMDktLjA4LS4xOC0uMDgtLjI5di0yLjAzYzAtLjExLjAzLS4yLjA4LS4yOS4wNS0uMDkuMTItLjE2LjIxLS4yMS4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjZ2LjQ4aC0yLjUzcy0uMDkuMDItLjEyLjA1Yy0uMDMuMDMtLjA1LjA3LS4wNS4xMnYxLjlzLjAyLjA5LjA1LjEyLjA3LjA1LjEyLjA1aDIuNTN2LjQ4aC0yLjZaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzOC4zNSw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMzguMzYsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0MS40NCw4MC40OXYtMy4xOGguNTdsMS4yMywxLjQ3LDEuMjMtMS40N2guNTd2My4xOGgtLjQ4di0yLjU0bC0xLjMyLDEuNTctMS4zMy0xLjU3djIuNTRoLS40OFoiLz4KICAgICAgICA8cGF0aCBkPSJNMzQ1LjU0LDgwLjQ5di0zLjE4aDIuNmMuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMXMuMDguMTguMDguMjl2Ljg5YzAsLjExLS4wMy4yLS4wOC4yOXMtLjEyLjE2LS4yMS4yMS0uMTkuMDgtLjI5LjA4aC0yLjEzdjEuMTRoLS40OFpNMzQ2LjEzLDc4Ljg3aDIuMDFzLjA1LDAsLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LS44N3MtLjAxLS4wNi0uMDMtLjA4Yy0uMDItLjAyLS4wNS0uMDMtLjA4LS4wM2gtMi4wMXMtLjA2LjAxLS4wOC4wM2MtLjAyLjAyLS4wMy4wNS0uMDMuMDh2Ljg3cy4wMS4wNS4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgIDwvZz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyNTMuOTEgODEuNjEgMjQ1LjM5IDgxLjYxIDI0OS4yOCA3NS45MyAyNTcuOCA3NS45MyAyNTMuOTEgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzMDIuMzQgODEuNjEgMjYzLjgyIDgxLjYxIDI2Ny43MSA3NS45MyAzMDYuMjMgNzUuOTMgMzAyLjM0IDgxLjYxIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjU3Ljk2IDgxLjYxIDI1NS40NCA4MS42MSAyNTkuMzMgNzUuOTMgMjYxLjg1IDc1LjkzIDI1Ny45NiA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjI2MS45NCA4MS42MSAyNTkuNDEgODEuNjEgMjYzLjMgNzUuOTMgMjY1LjgzIDc1LjkzIDI2MS45NCA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1My4zMSA4MS42MSAzNTAuNzkgODEuNjEgMzU0LjY4IDc1LjkzIDM1Ny4yIDc1LjkzIDM1My4zMSA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1Ny4yOSA4MS42MSAzNTQuNzYgODEuNjEgMzU4LjY1IDc1LjkzIDM2MS4xOCA3NS45MyAzNTcuMjkgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzODguMTEgNDYuNCAzODguMTEgNTQuOTIgMzgyLjQyIDUxLjAzIDM4Mi40MiA0Mi41MSAzODguMTEgNDYuNCIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzLjk3IDM4OC4xMSAzNi40OSAzODIuNDIgMzIuNiAzODIuNDIgLjA4IDM4OC4xMSAzLjk3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMzg4LjExIDQyLjM1IDM4OC4xMSA0NC44NyAzODIuNDIgNDAuOTkgMzgyLjQyIDM4LjQ2IDM4OC4xMSA0Mi4zNSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzOC4zNyAzODguMTEgNDAuOSAzODIuNDIgMzcuMDEgMzgyLjQyIDM0LjQ5IDM4OC4xMSAzOC4zNyIvPgogICAgICA8Zz4KICAgICAgICA8cmVjdCB4PSIzNTQuNzYiIHk9IjQuMjgiIHdpZHRoPSIxLjA3IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU2LjcxIiB5PSI0LjI4IiB3aWR0aD0iLjg2IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU5LjQxIiB5PSI0LjI4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2MS45MyIgeT0iNC4yOCIgd2lkdGg9Ii4zNyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NC4wNCIgeT0iNC4yOCIgd2lkdGg9Ii42OSIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NS40MSIgeT0iNC4yOCIgd2lkdGg9Ii43MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS4zMiIgeT0iNC4yOCIgd2lkdGg9Ii4yOCIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS45OCIgeT0iNC4yOCIgd2lkdGg9IjEuODYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzMuMjEiIHk9IjQuMjgiIHdpZHRoPSIuNTUiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNjYuNzQiIHk9IjQuMjgiIHdpZHRoPSIuNTQiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzUuNTkiIHk9IjQuMjgiIHdpZHRoPSIuMzYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzQ2LjU2LDE1LjY4bC0uMTctLjYyYzIuMTctLjU3LDMuNjgtMi41NCwzLjY4LTQuNzlzLTEuNTEtNC4yMS0zLjY4LTQuNzlsLjE3LS42MmMyLjQ1LjY1LDQuMTYsMi44Nyw0LjE2LDUuNDFzLTEuNzEsNC43Ni00LjE2LDUuNDFaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0My42OSwxNS42OGMtMi40NS0uNjUtNC4xNi0yLjg3LTQuMTYtNS40MXMxLjcxLTQuNzYsNC4xNi01LjQxbC4xNy42MmMtMi4xNy41Ny0zLjY4LDIuNTQtMy42OCw0Ljc5czEuNTEsNC4yMSwzLjY4LDQuNzlsLS4xNy42MloiLz4KICAgICAgICA8cmVjdCB4PSIzNDQuOCIgeT0iNy4xNCIgd2lkdGg9Ii42NSIgaGVpZ2h0PSI2LjI2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzQyIiB5PSI5Ljk0IiB3aWR0aD0iNi4yNiIgaGVpZ2h0PSIuNjUiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw0My44M3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDUxLjU1di0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgICAgPHBhdGggZD0iTTQuNTQsNTkuMjh2LTMuMDJsNS4xOS00LjIxYy45LjU0LDEuMDcuNjUsMS45NywxLjE5djMuMDJsLTUuMTksNC4yMWMtLjktLjU0LTEuMDctLjY1LTEuOTctMS4xOVoiLz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw2N3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDc0Ljczdi0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 4px rgba(147, 255, 128, 0.5));
  transition: filter var(--t);
  z-index: -1;
  pointer-events: none;
}
/* Glow intensifies on interaction; the spin itself never stops. */
.nav__link--cta:hover::before,
.nav__link--cta:focus-visible::before {
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.7)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.55));
}
.nav__link--cta:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.nav__link--cta:focus-visible .nav__link--cta__glitch {
  display: none;
}

/* Hover glitch overlay — same shimmy/clip-path mechanic as .btn__glitch,
   duplicated here (rather than sharing the class) since this component
   doesn't use the --btn-* variable set .btn__glitch depends on. */
.nav__link--cta__glitch {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--pink);
  color: var(--edgerunner-purple-950, #1e0a47);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC00MWUyOGUwNC1mNjQwLTQ2MTUtOTdmOC05ODgwOTU2YzI5ZmIiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODkuNzYgODIuMTUiPgogIDxnIGlkPSJ1dWlkLTBkNDg2ZTNkLWZjYTEtNDFmZC04MjVlLTVmMGRlYjdlYWI2MCIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Ik0zNzguOTMsMnY1Mi4wMmwxLjA0LjU3LDcuNzksNC4yNnY1LjI5bC05LjYsMTYuMDJoLTE0Ljg0bDIuNjgtNC4xMiwyLjAxLTMuMDloLTEyMS4zNmwtLjYuODUtNC40Nyw2LjM2aC03LjY2di03LjI3SDI3LjZsLS42Ljc0LTMuNTYsNC40MUgyVjIzLjkyTDIyLjg0LDIuMTNoMjIwLjQzbDkuODQsNy45NS41NS40NGg2OS44OWwuNTMtLjM5LDEwLjk5LTguMTNoNDMuODZNMzgwLjkzLDBoLTQ2LjUybC0xMS41Miw4LjUyaC02OC41MkwyNDMuOTguMTNIMjEuOTlMMCwyMy4xMnY1Ni45M2gyNC40bDQuMTYtNS4xNmgyMDMuMzd2Ny4yN2gxMC43bDUuMDYtNy4yMWgxMTYuNjNsLTQuNyw3LjIxaDE5LjY2bDEwLjQ3LTE3LjQ3di03LjAzbC04LjgzLTQuODNWMGgwWiIvPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzA5LjEzLDc3LjNoMi40N2MuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMS4wNS4wOS4wOC4xOC4wOC4yOXYuNjVzMCwuMDgtLjAxLjExYzAsLjA0LS4wMi4wNy0uMDQuMTEuMDYuMDguMS4xNi4xMy4yMy4wMy4wNy4wNS4xNC4wNS4yMnYuNzFjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTkuMDgtLjI5LjA4aC0yLjZ2LTMuMThaTTMwOS43Miw3OC42M2gxLjg3cy4wNS0uMDEuMDctLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjYycy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDctLjAzaC0xLjg3cy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjYycy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaTTMwOS43Miw4MC4wMWgyLjAxcy4wNS0uMDEuMDgtLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjY4cy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDgtLjAzaC0yLjAxcy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjY4cy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxMy4wNyw4MC40MWMtLjA5LS4wNS0uMTYtLjEyLS4yMS0uMjFzLS4wOC0uMTgtLjA4LS4yOXYtMi42MWguNDh2Mi41OXMuMDEuMDYuMDMuMDhjLjAyLjAyLjA1LjAzLjA4LjAzaDIuMDFzLjA1LS4wMS4wOC0uMDNjLjAyLS4wMi4wMy0uMDUuMDMtLjA4di0yLjU5aC40OHYyLjYxYzAsLjExLS4wMy4yLS4wOC4yOS0uMDUuMDktLjEyLjE2LS4yMS4yMXMtLjE4LjA4LS4yOS4wOGgtMi4wM2MtLjExLDAtLjItLjAzLS4yOS0uMDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxNy42NCw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMSw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMy43Miw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMjMuNzQsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyNi44Miw4MC40OXYtMy4xOGguNTdsMi4xMywyLjU0di0yLjU0aC40OHYzLjE4aC0uNTdsLTIuMTMtMi41NHYyLjU0aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzMC40OCw4MC45N3YtLjQ4aDMuMTh2LjQ4aC0zLjE4WiIvPgogICAgICAgIDxwYXRoIGQ9Ik0zMzQuNzIsODAuNDljLS4xMSwwLS4yLS4wMy0uMjktLjA4cy0uMTYtLjEyLS4yMS0uMjFjLS4wNS0uMDktLjA4LS4xOC0uMDgtLjI5di0yLjAzYzAtLjExLjAzLS4yLjA4LS4yOS4wNS0uMDkuMTItLjE2LjIxLS4yMS4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjZ2LjQ4aC0yLjUzcy0uMDkuMDItLjEyLjA1Yy0uMDMuMDMtLjA1LjA3LS4wNS4xMnYxLjlzLjAyLjA5LjA1LjEyLjA3LjA1LjEyLjA1aDIuNTN2LjQ4aC0yLjZaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzOC4zNSw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMzguMzYsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0MS40NCw4MC40OXYtMy4xOGguNTdsMS4yMywxLjQ3LDEuMjMtMS40N2guNTd2My4xOGgtLjQ4di0yLjU0bC0xLjMyLDEuNTctMS4zMy0xLjU3djIuNTRoLS40OFoiLz4KICAgICAgICA8cGF0aCBkPSJNMzQ1LjU0LDgwLjQ5di0zLjE4aDIuNmMuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMXMuMDguMTguMDguMjl2Ljg5YzAsLjExLS4wMy4yLS4wOC4yOXMtLjEyLjE2LS4yMS4yMS0uMTkuMDgtLjI5LjA4aC0yLjEzdjEuMTRoLS40OFpNMzQ2LjEzLDc4Ljg3aDIuMDFzLjA1LDAsLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LS44N3MtLjAxLS4wNi0uMDMtLjA4Yy0uMDItLjAyLS4wNS0uMDMtLjA4LS4wM2gtMi4wMXMtLjA2LjAxLS4wOC4wM2MtLjAyLjAyLS4wMy4wNS0uMDMuMDh2Ljg3cy4wMS4wNS4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgIDwvZz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyNTMuOTEgODEuNjEgMjQ1LjM5IDgxLjYxIDI0OS4yOCA3NS45MyAyNTcuOCA3NS45MyAyNTMuOTEgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzMDIuMzQgODEuNjEgMjYzLjgyIDgxLjYxIDI2Ny43MSA3NS45MyAzMDYuMjMgNzUuOTMgMzAyLjM0IDgxLjYxIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjU3Ljk2IDgxLjYxIDI1NS40NCA4MS42MSAyNTkuMzMgNzUuOTMgMjYxLjg1IDc1LjkzIDI1Ny45NiA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjI2MS45NCA4MS42MSAyNTkuNDEgODEuNjEgMjYzLjMgNzUuOTMgMjY1LjgzIDc1LjkzIDI2MS45NCA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1My4zMSA4MS42MSAzNTAuNzkgODEuNjEgMzU0LjY4IDc1LjkzIDM1Ny4yIDc1LjkzIDM1My4zMSA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1Ny4yOSA4MS42MSAzNTQuNzYgODEuNjEgMzU4LjY1IDc1LjkzIDM2MS4xOCA3NS45MyAzNTcuMjkgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzODguMTEgNDYuNCAzODguMTEgNTQuOTIgMzgyLjQyIDUxLjAzIDM4Mi40MiA0Mi41MSAzODguMTEgNDYuNCIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzLjk3IDM4OC4xMSAzNi40OSAzODIuNDIgMzIuNiAzODIuNDIgLjA4IDM4OC4xMSAzLjk3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMzg4LjExIDQyLjM1IDM4OC4xMSA0NC44NyAzODIuNDIgNDAuOTkgMzgyLjQyIDM4LjQ2IDM4OC4xMSA0Mi4zNSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzOC4zNyAzODguMTEgNDAuOSAzODIuNDIgMzcuMDEgMzgyLjQyIDM0LjQ5IDM4OC4xMSAzOC4zNyIvPgogICAgICA8Zz4KICAgICAgICA8cmVjdCB4PSIzNTQuNzYiIHk9IjQuMjgiIHdpZHRoPSIxLjA3IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU2LjcxIiB5PSI0LjI4IiB3aWR0aD0iLjg2IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU5LjQxIiB5PSI0LjI4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2MS45MyIgeT0iNC4yOCIgd2lkdGg9Ii4zNyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NC4wNCIgeT0iNC4yOCIgd2lkdGg9Ii42OSIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NS40MSIgeT0iNC4yOCIgd2lkdGg9Ii43MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS4zMiIgeT0iNC4yOCIgd2lkdGg9Ii4yOCIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS45OCIgeT0iNC4yOCIgd2lkdGg9IjEuODYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzMuMjEiIHk9IjQuMjgiIHdpZHRoPSIuNTUiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNjYuNzQiIHk9IjQuMjgiIHdpZHRoPSIuNTQiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzUuNTkiIHk9IjQuMjgiIHdpZHRoPSIuMzYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzQ2LjU2LDE1LjY4bC0uMTctLjYyYzIuMTctLjU3LDMuNjgtMi41NCwzLjY4LTQuNzlzLTEuNTEtNC4yMS0zLjY4LTQuNzlsLjE3LS42MmMyLjQ1LjY1LDQuMTYsMi44Nyw0LjE2LDUuNDFzLTEuNzEsNC43Ni00LjE2LDUuNDFaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0My42OSwxNS42OGMtMi40NS0uNjUtNC4xNi0yLjg3LTQuMTYtNS40MXMxLjcxLTQuNzYsNC4xNi01LjQxbC4xNy42MmMtMi4xNy41Ny0zLjY4LDIuNTQtMy42OCw0Ljc5czEuNTEsNC4yMSwzLjY4LDQuNzlsLS4xNy42MloiLz4KICAgICAgICA8cmVjdCB4PSIzNDQuOCIgeT0iNy4xNCIgd2lkdGg9Ii42NSIgaGVpZ2h0PSI2LjI2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzQyIiB5PSI5Ljk0IiB3aWR0aD0iNi4yNiIgaGVpZ2h0PSIuNjUiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw0My44M3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDUxLjU1di0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgICAgPHBhdGggZD0iTTQuNTQsNTkuMjh2LTMuMDJsNS4xOS00LjIxYy45LjU0LDEuMDcuNjUsMS45NywxLjE5djMuMDJsLTUuMTksNC4yMWMtLjktLjU0LTEuMDctLjY1LTEuOTctMS4xOVoiLz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw2N3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDc0Ljczdi0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC00MWUyOGUwNC1mNjQwLTQ2MTUtOTdmOC05ODgwOTU2YzI5ZmIiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODkuNzYgODIuMTUiPgogIDxnIGlkPSJ1dWlkLTBkNDg2ZTNkLWZjYTEtNDFmZC04MjVlLTVmMGRlYjdlYWI2MCIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Ik0zNzguOTMsMnY1Mi4wMmwxLjA0LjU3LDcuNzksNC4yNnY1LjI5bC05LjYsMTYuMDJoLTE0Ljg0bDIuNjgtNC4xMiwyLjAxLTMuMDloLTEyMS4zNmwtLjYuODUtNC40Nyw2LjM2aC03LjY2di03LjI3SDI3LjZsLS42Ljc0LTMuNTYsNC40MUgyVjIzLjkyTDIyLjg0LDIuMTNoMjIwLjQzbDkuODQsNy45NS41NS40NGg2OS44OWwuNTMtLjM5LDEwLjk5LTguMTNoNDMuODZNMzgwLjkzLDBoLTQ2LjUybC0xMS41Miw4LjUyaC02OC41MkwyNDMuOTguMTNIMjEuOTlMMCwyMy4xMnY1Ni45M2gyNC40bDQuMTYtNS4xNmgyMDMuMzd2Ny4yN2gxMC43bDUuMDYtNy4yMWgxMTYuNjNsLTQuNyw3LjIxaDE5LjY2bDEwLjQ3LTE3LjQ3di03LjAzbC04LjgzLTQuODNWMGgwWiIvPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzA5LjEzLDc3LjNoMi40N2MuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMS4wNS4wOS4wOC4xOC4wOC4yOXYuNjVzMCwuMDgtLjAxLjExYzAsLjA0LS4wMi4wNy0uMDQuMTEuMDYuMDguMS4xNi4xMy4yMy4wMy4wNy4wNS4xNC4wNS4yMnYuNzFjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTkuMDgtLjI5LjA4aC0yLjZ2LTMuMThaTTMwOS43Miw3OC42M2gxLjg3cy4wNS0uMDEuMDctLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjYycy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDctLjAzaC0xLjg3cy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjYycy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaTTMwOS43Miw4MC4wMWgyLjAxcy4wNS0uMDEuMDgtLjAzYy4wMi0uMDIuMDMtLjA1LjAzLS4wOHYtLjY4cy0uMDEtLjA1LS4wMy0uMDgtLjA1LS4wMy0uMDgtLjAzaC0yLjAxcy0uMDYuMDEtLjA4LjAzLS4wMy4wNS0uMDMuMDh2LjY4cy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxMy4wNyw4MC40MWMtLjA5LS4wNS0uMTYtLjEyLS4yMS0uMjFzLS4wOC0uMTgtLjA4LS4yOXYtMi42MWguNDh2Mi41OXMuMDEuMDYuMDMuMDhjLjAyLjAyLjA1LjAzLjA4LjAzaDIuMDFzLjA1LS4wMS4wOC0uMDNjLjAyLS4wMi4wMy0uMDUuMDMtLjA4di0yLjU5aC40OHYyLjYxYzAsLjExLS4wMy4yLS4wOC4yOS0uMDUuMDktLjEyLjE2LS4yMS4yMXMtLjE4LjA4LS4yOS4wOGgtMi4wM2MtLjExLDAtLjItLjAzLS4yOS0uMDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMxNy42NCw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMSw4MC40OXYtMi43aC0xLjM1di0uNDhoMy4xOHYuNDhoLTEuMzV2Mi43aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyMy43Miw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMjMuNzQsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTMyNi44Miw4MC40OXYtMy4xOGguNTdsMi4xMywyLjU0di0yLjU0aC40OHYzLjE4aC0uNTdsLTIuMTMtMi41NHYyLjU0aC0uNDhaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzMC40OCw4MC45N3YtLjQ4aDMuMTh2LjQ4aC0zLjE4WiIvPgogICAgICAgIDxwYXRoIGQ9Ik0zMzQuNzIsODAuNDljLS4xMSwwLS4yLS4wMy0uMjktLjA4cy0uMTYtLjEyLS4yMS0uMjFjLS4wNS0uMDktLjA4LS4xOC0uMDgtLjI5di0yLjAzYzAtLjExLjAzLS4yLjA4LS4yOS4wNS0uMDkuMTItLjE2LjIxLS4yMS4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjZ2LjQ4aC0yLjUzcy0uMDkuMDItLjEyLjA1Yy0uMDMuMDMtLjA1LjA3LS4wNS4xMnYxLjlzLjAyLjA5LjA1LjEyLjA3LjA1LjEyLjA1aDIuNTN2LjQ4aC0yLjZaIi8+CiAgICAgICAgPHBhdGggZD0iTTMzOC4zNSw4MC40OWMtLjExLDAtLjItLjAzLS4yOS0uMDhzLS4xNi0uMTItLjIxLS4yMS0uMDgtLjE4LS4wOC0uMjl2LTIuMDNjMC0uMTEuMDMtLjIuMDgtLjI5cy4xMi0uMTYuMjEtLjIxYy4wOS0uMDUuMTgtLjA4LjI5LS4wOGgyLjAzYy4xMSwwLC4yLjAzLjI5LjA4LjA5LjA1LjE2LjEyLjIxLjIxLjA1LjA5LjA4LjE4LjA4LjI5djIuMDNjMCwuMTEtLjAzLjItLjA4LjI5LS4wNS4wOS0uMTIuMTYtLjIxLjIxcy0uMTguMDgtLjI5LjA4aC0yLjAzWk0zMzguMzYsODAuMDFoMi4wMXMuMDUtLjAxLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LTIuMDFzLS4wMS0uMDUtLjAzLS4wOGMtLjAyLS4wMi0uMDUtLjAzLS4wOC0uMDNoLTIuMDFzLS4wNi4wMS0uMDguMDMtLjAzLjA1LS4wMy4wOHYyLjAxcy4wMS4wNi4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0MS40NCw4MC40OXYtMy4xOGguNTdsMS4yMywxLjQ3LDEuMjMtMS40N2guNTd2My4xOGgtLjQ4di0yLjU0bC0xLjMyLDEuNTctMS4zMy0xLjU3djIuNTRoLS40OFoiLz4KICAgICAgICA8cGF0aCBkPSJNMzQ1LjU0LDgwLjQ5di0zLjE4aDIuNmMuMTEsMCwuMi4wMy4yOS4wOC4wOS4wNS4xNi4xMi4yMS4yMXMuMDguMTguMDguMjl2Ljg5YzAsLjExLS4wMy4yLS4wOC4yOXMtLjEyLjE2LS4yMS4yMS0uMTkuMDgtLjI5LjA4aC0yLjEzdjEuMTRoLS40OFpNMzQ2LjEzLDc4Ljg3aDIuMDFzLjA1LDAsLjA4LS4wM2MuMDItLjAyLjAzLS4wNS4wMy0uMDh2LS44N3MtLjAxLS4wNi0uMDMtLjA4Yy0uMDItLjAyLS4wNS0uMDMtLjA4LS4wM2gtMi4wMXMtLjA2LjAxLS4wOC4wM2MtLjAyLjAyLS4wMy4wNS0uMDMuMDh2Ljg3cy4wMS4wNS4wMy4wOGMuMDIuMDIuMDUuMDMuMDguMDNaIi8+CiAgICAgIDwvZz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyNTMuOTEgODEuNjEgMjQ1LjM5IDgxLjYxIDI0OS4yOCA3NS45MyAyNTcuOCA3NS45MyAyNTMuOTEgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzMDIuMzQgODEuNjEgMjYzLjgyIDgxLjYxIDI2Ny43MSA3NS45MyAzMDYuMjMgNzUuOTMgMzAyLjM0IDgxLjYxIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjU3Ljk2IDgxLjYxIDI1NS40NCA4MS42MSAyNTkuMzMgNzUuOTMgMjYxLjg1IDc1LjkzIDI1Ny45NiA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjI2MS45NCA4MS42MSAyNTkuNDEgODEuNjEgMjYzLjMgNzUuOTMgMjY1LjgzIDc1LjkzIDI2MS45NCA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1My4zMSA4MS42MSAzNTAuNzkgODEuNjEgMzU0LjY4IDc1LjkzIDM1Ny4yIDc1LjkzIDM1My4zMSA4MS42MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM1Ny4yOSA4MS42MSAzNTQuNzYgODEuNjEgMzU4LjY1IDc1LjkzIDM2MS4xOCA3NS45MyAzNTcuMjkgODEuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzODguMTEgNDYuNCAzODguMTEgNTQuOTIgMzgyLjQyIDUxLjAzIDM4Mi40MiA0Mi41MSAzODguMTEgNDYuNCIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzLjk3IDM4OC4xMSAzNi40OSAzODIuNDIgMzIuNiAzODIuNDIgLjA4IDM4OC4xMSAzLjk3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMzg4LjExIDQyLjM1IDM4OC4xMSA0NC44NyAzODIuNDIgNDAuOTkgMzgyLjQyIDM4LjQ2IDM4OC4xMSA0Mi4zNSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjM4OC4xMSAzOC4zNyAzODguMTEgNDAuOSAzODIuNDIgMzcuMDEgMzgyLjQyIDM0LjQ5IDM4OC4xMSAzOC4zNyIvPgogICAgICA8Zz4KICAgICAgICA8cmVjdCB4PSIzNTQuNzYiIHk9IjQuMjgiIHdpZHRoPSIxLjA3IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU2LjcxIiB5PSI0LjI4IiB3aWR0aD0iLjg2IiBoZWlnaHQ9IjExLjk2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzU5LjQxIiB5PSI0LjI4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2MS45MyIgeT0iNC4yOCIgd2lkdGg9Ii4zNyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NC4wNCIgeT0iNC4yOCIgd2lkdGg9Ii42OSIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2NS40MSIgeT0iNC4yOCIgd2lkdGg9Ii43MyIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS4zMiIgeT0iNC4yOCIgd2lkdGg9Ii4yOCIgaGVpZ2h0PSIxMS45NiIvPgogICAgICAgIDxyZWN0IHg9IjM2OS45OCIgeT0iNC4yOCIgd2lkdGg9IjEuODYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzMuMjEiIHk9IjQuMjgiIHdpZHRoPSIuNTUiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNjYuNzQiIHk9IjQuMjgiIHdpZHRoPSIuNTQiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgICA8cmVjdCB4PSIzNzUuNTkiIHk9IjQuMjgiIHdpZHRoPSIuMzYiIGhlaWdodD0iMTEuOTYiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMzQ2LjU2LDE1LjY4bC0uMTctLjYyYzIuMTctLjU3LDMuNjgtMi41NCwzLjY4LTQuNzlzLTEuNTEtNC4yMS0zLjY4LTQuNzlsLjE3LS42MmMyLjQ1LjY1LDQuMTYsMi44Nyw0LjE2LDUuNDFzLTEuNzEsNC43Ni00LjE2LDUuNDFaIi8+CiAgICAgICAgPHBhdGggZD0iTTM0My42OSwxNS42OGMtMi40NS0uNjUtNC4xNi0yLjg3LTQuMTYtNS40MXMxLjcxLTQuNzYsNC4xNi01LjQxbC4xNy42MmMtMi4xNy41Ny0zLjY4LDIuNTQtMy42OCw0Ljc5czEuNTEsNC4yMSwzLjY4LDQuNzlsLS4xNy42MloiLz4KICAgICAgICA8cmVjdCB4PSIzNDQuOCIgeT0iNy4xNCIgd2lkdGg9Ii42NSIgaGVpZ2h0PSI2LjI2Ii8+CiAgICAgICAgPHJlY3QgeD0iMzQyIiB5PSI5Ljk0IiB3aWR0aD0iNi4yNiIgaGVpZ2h0PSIuNjUiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw0My44M3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDUxLjU1di0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgICAgPHBhdGggZD0iTTQuNTQsNTkuMjh2LTMuMDJsNS4xOS00LjIxYy45LjU0LDEuMDcuNjUsMS45NywxLjE5djMuMDJsLTUuMTksNC4yMWMtLjktLjU0LTEuMDctLjY1LTEuOTctMS4xOVoiLz4KICAgICAgICA8cGF0aCBkPSJNNC41NCw2N3YtMy4wMmw1LjE5LTQuMjFjLjkuNTQsMS4wNy42NSwxLjk3LDEuMTl2My4wMmwtNS4xOSw0LjIxYy0uOS0uNTQtMS4wNy0uNjUtMS45Ny0xLjE5WiIvPgogICAgICAgIDxwYXRoIGQ9Ik00LjU0LDc0Ljczdi0zLjAybDUuMTktNC4yMWMuOS41NCwxLjA3LjY1LDEuOTcsMS4xOXYzLjAybC01LjE5LDQuMjFjLS45LS41NC0xLjA3LS42NS0xLjk3LTEuMTlaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  text-shadow: 2px 2px var(--orange), -2px -2px var(--purple);
  animation: btn-glitch 2s infinite;
  pointer-events: none;
}
.nav__link--cta:hover .nav__link--cta__glitch {
  display: flex;
}

/* Toggle: visible en móvil — las 3 barras se convierten en "X" al abrir */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  position: relative;
  z-index: 101; /* por encima del panel, para poder cerrarlo con el mismo botón */
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil — panel deslizante con fade en vez del display:none/flex
   instantáneo de antes. Cubre todo el alto restante del viewport (inset con
   bottom:0, no solo top:70px) para que el contenido de detrás (hero, CTAs)
   no se transparente bajo el panel mientras está abierto; JS bloquea el
   scroll del body en paralelo (ver .no-scroll). Se queda en el DOM sin
   [hidden] durante la transición — JS lo reaplica al terminar de cerrar,
   así sigue inalcanzable por teclado/lector de pantalla cuando no se ve. */
.nav__mobile {
  position: fixed;
  inset: 70px 0 0 0;
  background: rgba(9, 6, 13, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.25rem;
  z-index: 99;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.nav__mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.nav__mobile .nav__link { font-size: 1.1rem; }
/* El CTA es más ancho que alto (texto largo, una sola línea), pero la
   moldura decorativa (::before, mask-size:100% 100%) está dibujada para
   una proporción ~4.74:1 — al estirarla sin conservar el aspect ratio a
   una caja de ~5.8:1, la moldura y sus marcas (barcode, spiral) quedan
   desplazadas/deformadas: eso es el "glitch" que se ve en el menú móvil.
   Se sube el padding vertical para acercar la caja a esa proporción
   (además de acercarse al mínimo de 44px de alto recomendado para
   objetivos táctiles). El padding izquierdo se recorta y se compensa con
   margin-left negativo para que el texto arranque casi a la misma altura
   que el resto de enlaces, sin perder el hueco que la moldura necesita
   en esa esquina. */
.nav__mobile .nav__link--cta {
  padding: 1rem 2.2rem 1rem 1.5rem;
  margin-left: -1rem;
}
/* Aire extra por encima del CTA, aparte del gap: 1.5rem que ya separa el
   resto de enlaces entre sí (el CTA es un botón, no un link de texto más,
   y conviene que respire algo más de "Empresas"). Va en el <li> — el
   <a> es display:inline y un margin-top ahí no tendría efecto. */
.nav__mobile ul li:last-child { margin-top: 0.75rem; }

/* Bloquea el scroll de fondo mientras el menú móvil está abierto */
body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav__toggle span,
  .nav__mobile { transition: none; }
}

/* ======================== HERO ======================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 5rem;
  overflow: hidden;
  z-index: 1;
}
.hero__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  --x: -0.5rem;
  --y: 50%;
}
.hero__waves svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__waves .a__line {
  fill: none;
  stroke: #44E03A;
  stroke-width: 1;
}
.hero__waves .pointer-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: #44E03A;
  border-radius: 50%;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
  will-change: transform;
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 70% 65% at 50% 42%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(130, 41, 255, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(34, 249, 55, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: 100%;
}
.hero__title {
  margin-bottom: 1.25rem;
  line-height: 1;
}

.hero__tagline {
  font-family: var(--ff-ui);
  font-size: clamp(0.85rem, 2.55vw, 1.32rem); /* 15% smaller than before */
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--edgerunner-purple-400);
  text-shadow: 0 0 20px rgba(174, 128, 255, 0.5);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.cursor {
  animation: blink 0.85s step-end infinite;
  color: var(--edgerunner-purple-500);
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
}

/* ≤600px: el bloque logo+tagline+botones quedaba centrado como un único
   grupo compacto, con mucho hueco vacío por encima y por debajo dentro de
   los 100svh del hero. Márgenes más generosos entre cada pieza (en vez de
   más padding en .hero, que solo movería el grupo entero sin repartirlo)
   hacen que el conjunto ocupe más alto de pantalla en vez de apretarse
   en el centro. */
@media (max-width: 600px) {
  .hero__title {
    margin-bottom: 2.25rem;
  }
  .hero__tagline {
    margin-bottom: 3.5rem;
  }
  .hero__actions {
    gap: 1.25rem;
  }
}

/* Scroll — terminal hero (parte del flujo, ancho completo) */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: -1px;
}

/* Espacio para que el scroll no tape el contenido */
.hero:not(.hero--terminal) .hero__content,
.hero-banner__inner {
  padding-bottom: 6rem;
}

/* Scroll — hero clásico (absoluto, centrado en la base) */
.hero:not(.hero--terminal) .hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  margin-top: 0;
  gap: 0.5rem;
  z-index: 2;
}
.hero:not(.hero--terminal) .hero__scroll span {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.hero__scroll-bar {
  display: flex;
  align-items: center;
  width: 100%;
}
.hero__scroll-bar::before,
.hero__scroll-bar::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(109, 40, 217, 0.35);
}
.hero__scroll-bar span {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0 0.75rem;
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--purple), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

/* ======================== SECCIONES ======================== */
.section {
  position: relative;
  z-index: 1;
  padding: var(--section-pad) 0;
}

/* Línea divisoria con gradiente accent en el borde superior de cada sección */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 249, 55, 0.55) 50%, transparent 100%);
  pointer-events: none;
}

/* Secciones primarias y alternas */
.section--primary {
  background: linear-gradient(to bottom, var(--bg-primary-start-color), var(--bg-primary-end-color));
}
.section--alt {
  background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color));
}
.section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.section__eyebrow {
  font-family: var(--ff-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(34, 249, 55, 0.4));
  margin-bottom: 1rem;
}
.section__title {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  margin-bottom: 1.25rem;
  color: var(--text);
}
.section__desc {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.section__desc:last-child { margin-bottom: 0; }

/* ======================== DECLARACIÓN DE INTENCIONES (acento) ======================== */
.statement-section {
  background: var(--matrix-green-400);
  overflow: hidden;
}
.statement-section::before { content: none; } /* sin línea divisoria verde: el fondo ya es verde */
.statement-section .container {
  text-align: center;
  max-width: 900px;
}
.statement-section__text {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--edgerunner-purple-950);
}
.statement-section__highlight {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Frase de cierre en tipografía distinta al brandmark (Barlow Semi
   Condensed, todo mayúsculas) con un poco más de separación respecto
   al brandmark de arriba. */
.statement-section__tail {
  display: inline-block;
  margin-top: 0.5em;
  font-family: var(--ff-ui);
  font-weight: 700;
  text-transform: uppercase;
}

/* Brandmark animado: el isotipo (va-brandmark) se disuelve y da paso al
   lockup horizontal completo (logo-nav actualizado) ----------------------
   Reutiliza el toggle .visible que main.js ya pone/quita en .reveal al
   entrar y salir del viewport (observadorReveal usa classList.toggle),
   así el morph va y vuelve igual que el resto de reveals al hacer scroll
   hacia arriba. Tinta sólida morada (currentColor) para leerse sobre el
   fondo verde de la sección. */
.statement-brand {
  position: relative;
  display: inline-block;
  /* font-size propio (no heredado del titular gigante): así el lockup
     horizontal (15.25em de ancho) no se sale del viewport en móvil. */
  font-size: clamp(0.85rem, 5.5vw, 2.4rem);
  height: 0.85em;
  /* Ancho FIJO desde el inicio (el del lockup completo). Antes este
     ancho se animaba con `width`, que es una propiedad de layout: cada
     frame forzaba un reflow y un re-centrado de todo el párrafo
     (text-align: center), y eso es lo que se veía como "glitch" /
     texto desplazándose. Reservar el ancho final de entrada y mover
     solo transform/opacity (que no disparan layout) soluciona esto. */
  width: 15.25em; /* ancho natural del lockup completo (273.99 / 15.27) */
  max-width: 100%;
  vertical-align: -0.08em;
  color: var(--edgerunner-purple-950);
}

.statement-brand__mark,
.statement-brand__full {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0.85em;
  width: auto;
  transform: translate(-50%, -50%);
}
.statement-brand__mark * ,
.statement-brand__full * { fill: currentColor; }

/* Secuencia en 3 tiempos, coreografiada con transition-delay. Cada fase
   comparte UNA sola duración/easing entre opacity y transform (para que
   opacidad y movimiento lleguen a la vez y no se sientan desincronizados):
   0) pausa: el isotipo se queda quieto y opaco un instante — se deja
      "leer" antes de que pase nada.
   1) las dos mitades del isotipo se separan del centro, como </>
      abriéndose (ease-in-out: es movimiento en pantalla, no entrada/salida).
   2) esas piezas se disuelven a la vez que aparece el "esqueleto"
      (corchetes + slash) del logo completo, ya en su posición final
      (ease-out: es contenido entrando/saliendo).
   3) las letras (VANGUARD / ACADEMY) son lo último en aparecer,
      "materializándose" dentro de ese esqueleto. */
.statement-brand__mark-left,
.statement-brand__mark-right {
  will-change: transform, opacity;
  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.35s,
              opacity   0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.56s;
}
.statement-brand__mark-slash {
  will-change: opacity;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.56s;
}
.statement-section__text.visible .statement-brand__mark-left {
  transform: translateX(-7px);
  opacity: 0;
}
.statement-section__text.visible .statement-brand__mark-right {
  transform: translateX(7px);
  opacity: 0;
}
.statement-section__text.visible .statement-brand__mark-slash {
  opacity: 0;
}

.statement-brand__full-frame,
.statement-brand__full-letters {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}
.statement-brand__full-frame {
  will-change: transform, opacity;
  transform: scale(0.95);
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.56s,
              transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.56s;
}
.statement-brand__full-letters {
  will-change: transform, opacity;
  transform: scale(0.92);
  transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.72s,
              transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.72s;
}
.statement-section__text.visible .statement-brand__full-frame {
  opacity: 1;
  transform: scale(1);
}
.statement-section__text.visible .statement-brand__full-letters {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .statement-brand__mark-left,
  .statement-brand__mark-right,
  .statement-brand__mark-slash { transition: none; opacity: 0; will-change: auto; }
  .statement-brand__full-frame,
  .statement-brand__full-letters { transition: none; opacity: 1; transform: scale(1); will-change: auto; }
}

/* ======================== FEATURE CARDS ======================== */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.feature-card {
  background: rgba(11, 8, 12, 0.75);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  transition: var(--t);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--card-glow, var(--purple-strong));
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-glow, var(--purple)), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after { opacity: 1; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03); }
.feature-card__icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: block;
}
.feature-card__title {
  font-family: var(--ff-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.feature-card__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ======================== MÓDULO ======================== */
.modulo-section {
  background: linear-gradient(to bottom, var(--bg-2), var(--bg));
}
.modulo__kicker {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}
.modulo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Badge al inicio en móvil */
.modulo__badge { order: -1; }

.modulo__topics {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.topic {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-left: none;
  border-radius: 0;
  padding: 1.1rem 1.25rem;
  transition: var(--t);
}

.topic::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--topic-color, var(--purple-strong)), transparent);
  transition: var(--t);
}

.topic:hover {
  transform: translateX(4px);
  filter: drop-shadow(2px 4px 12px rgba(0,0,0,0.35));
}

.topic:hover::before {
  width: 4px;
}
.topic__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}
.topic__num {
  font-family: var(--ff-display);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--topic-color, var(--purple));
  flex-shrink: 0;
}
.topic__title {
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.topic__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Badge card */
.badge-card {
  background: var(--bg-card);
  border: 1px solid var(--purple-strong);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 0 50px rgba(130, 41, 255, 0.12), inset 0 0 40px rgba(130, 41, 255, 0.03);
  position: relative;
  overflow: hidden;
}
.badge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  opacity: 1;
}
.badge-card__status {
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--green);
  text-shadow: 0 0 8px var(--green);
  margin-bottom: 1.25rem;
}
.badge-card__icon {
  margin-bottom: 0.75rem;
}
.badge-card__icon .material-icons-outlined {
  font-size: 3.2rem;
  color: var(--matrix-green-400);
}
.badge-card__title {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--purple);
  text-shadow: 0 0 12px var(--purple-strong);
  margin-bottom: 0.2rem;
}
.badge-card__sub {
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.badge-card__stats {
  display: flex;
  justify-content: space-around;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border-sub);
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 1.5rem;
}
.badge-stat { text-align: center; }
.badge-stat__val {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue);
}
.badge-stat__label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.badge-card__tag {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  border: 1px solid rgba(34, 249, 55, 0.3);
  border-radius: 99px;
  padding: 0.35rem 1rem;
}

/* ======================== HOW IT WORKS ======================== */
.hiw-section { background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color)); }

.hiw-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.hiw-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.hiw-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--step-color, var(--purple)), transparent);
  opacity: 1;
}

.hiw-step:hover {
  border-color: var(--step-color, rgba(34, 249, 55, 0.4));
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.hiw-step__num {
  font-family: var(--ff-display);
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--step-color, var(--green));
  text-shadow: 0 0 18px var(--step-color, var(--green));
  line-height: 1;
  flex-shrink: 0;
  min-width: 3rem;
}

.hiw-step__content { flex: 1; }

.hiw-step__title {
  font-family: var(--ff-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.55rem;
}

.hiw-step__desc {
  font-family: var(--ff-body);
  font-size: 0.97rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.hiw-step__terminal {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--step-color, var(--green));
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--step-color, var(--green));
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  letter-spacing: 0.04em;
}

.hiw-step__prompt {
  color: var(--prompt-color, var(--text-muted));
  margin-right: 0.5rem;
}

@media (min-width: 768px) {
  .hiw-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ======================== ALFA ======================== */
.alfa-section {
  background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color));
  position: relative;
  overflow: hidden;
}
/* empresas.html: su única otra sección de contenido (.pains-section, para
   los programas) ya es "alt" — sin este modificador quedarían dos
   secciones "alt" seguidas y no alternaría como en index. No se toca
   .alfa-section base porque index SÍ necesita que su pre-alfa (la última
   de 5, después de nosotros=primary) siga siendo alt. */
.alfa-section--primary {
  background: linear-gradient(to bottom, var(--bg-primary-start-color), var(--bg-primary-end-color));
}

/* Isotipo de fondo — Opción C: glow sutil + drift lento */
.alfa-isotipo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
}
.alfa-isotipo img {
  width: 100%;
  height: 100%;
  opacity: 0.05;
  filter: drop-shadow(0 0 48px rgba(34, 249, 55, 0.35))
          drop-shadow(0 0 120px rgba(34, 249, 55, 0.12));
}
@media (prefers-reduced-motion: no-preference) {
  .alfa-isotipo {
    animation: isotipo-float 22s ease-in-out infinite;
  }
}
@keyframes isotipo-float {
  0%,  100% { transform: translate(-50%, -50%) scale(1);       }
  33%        { transform: translate(-50%, -53%) scale(1.015);   }
  66%        { transform: translate(-50%, -47%) scale(0.988);   }
}

/* Contenido sobre el isotipo */
.alfa-section .container { position: relative; z-index: 1; }
.alfa__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  margin-bottom: 3.5rem;
  align-items: center;
}

@media (max-width: 768px) {
  .alfa__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
}
/* Mismo criterio de auto-centrado que .alfa__perks-col (abajo): cada columna
   centra su propio contenido en vertical, en vez de depender de que una de
   las dos sea casualmente la más alta para que .alfa__layout (align-items:
   center) las deje visualmente alineadas. Comparte CSS con index.html y
   empresas.html. */
.alfa__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.alfa__perks-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate; /* local stacking context so .alfa__warning's z-index only affects siblings here */
}

.alfa__perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.alfa__perks li { display: flex; align-items: center; gap: 0.8rem; }

.pre-alfa-tags {
  position: relative;
  z-index: 1; /* stays above .alfa__warning, which tucks in behind as a backdrop */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.pre-alfa-tag {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(34, 249, 55, 0.22);
  border-radius: 3px;
  color: var(--green-text);
  background: rgba(34, 249, 55, 0.04);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Icono HUD de alerta (triángulo + trazas de circuito + franjas de peligro)
   con revelado por etapas. Vive detrás de los tags como fondo animado muy
   apagado (casi marca de agua) — no un gráfico propio en su propio bloque —
   así que se solapa hacia arriba (margin-top negativo) y queda por debajo
   en z-index (ver .alfa__perks-col / .pre-alfa-tags). Se dispara una vez
   cuando el bloque padre (.alfa__perks-col) entra en viewport vía el
   observer de .reveal:
   1) trazas de circuito se dibujan (stroke-draw)
   2) contorno del triángulo aparece
   3) franjas diagonales entran desde el centro hacia fuera (stagger)
   4) marca central hace pop con overshoot
   5) nodos de esquina (puntos de soldadura) aparecen al final */
.alfa__warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 0;
  margin-top: -2.5rem;
  pointer-events: none;
}
.alfa__warning-svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  color: var(--purple);
  opacity: 0.15; /* watermark-level: muted background, not a foreground icon */
  overflow: visible;
}
@media (max-width: 768px) {
  .alfa__warning-svg { max-width: 280px; }
}

.alfa__warning-svg .warning__node {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5) translateY(3px);
}
.alfa__warning-svg .warning__traces path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.3;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.alfa__warning-svg .warning__triangle {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.94);
}
.alfa__warning-svg .warning__stripe {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}
.alfa__warning-svg .warning__stripe--right {
  transform-origin: left center;
}
.alfa__warning-svg .warning__mark {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.alfa__perks-col.visible .warning__traces path {
  animation: warning-trace-draw 1.2s ease-out forwards;
}
.alfa__perks-col.visible .warning__triangle {
  animation: warning-triangle-in 0.4s ease-out forwards 0.6s;
}
.alfa__perks-col.visible .warning__stripe {
  animation: warning-stripe-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.alfa__perks-col.visible .warning__stripe:nth-child(1) { animation-delay: 1.4s; }
.alfa__perks-col.visible .warning__stripe:nth-child(2) { animation-delay: 1.48s; }
.alfa__perks-col.visible .warning__stripe:nth-child(3) { animation-delay: 1.56s; }
.alfa__perks-col.visible .warning__stripe:nth-child(4) { animation-delay: 1.64s; }
.alfa__perks-col.visible .warning__stripe:nth-child(5) { animation-delay: 1.72s; }
.alfa__perks-col.visible .warning__stripe:nth-child(6) { animation-delay: 1.8s; }
.alfa__perks-col.visible .warning__mark {
  animation: warning-mark-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 2s;
}
.alfa__perks-col.visible .warning__node {
  animation: warning-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 2.5s;
}

@keyframes warning-trace-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes warning-triangle-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes warning-stripe-in {
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes warning-mark-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes warning-node-in {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .alfa__warning-svg .warning__node,
  .alfa__warning-svg .warning__traces path,
  .alfa__warning-svg .warning__triangle,
  .alfa__warning-svg .warning__stripe,
  .alfa__warning-svg .warning__mark {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .alfa__warning-svg .warning__traces path { opacity: 0.3; }
}

/* Botón submit: 50% en desktop, 100% en mobile */
.pre-alfa-submit {
  width: 50%;
}
@media (max-width: 768px) {
  .pre-alfa-submit { width: 100%; }
}
.perk-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--pink);
  box-shadow: 0 0 8px rgba(255, 0, 208, 0.5);
}

/* ── Underglow animado del formulario ─────── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes form-glow-spin {
  to { --glow-angle: 360deg; }
}

.alfa__form-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  isolation: isolate;
}

/* Borde brillante giratorio — the gradient is written inline (not
   through a shared custom-property variable) because animating
   --glow-angle only actually spins when it's referenced directly in
   the same declaration as the animation; indirecting through another
   custom property in between silently stops the rotation. */
.alfa__form-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle), var(--orange), var(--pink), var(--purple), var(--orange));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  animation: form-glow-spin 5s linear infinite;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* Underglow difuso detrás del card */
.alfa__form-wrap::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle), var(--orange), var(--pink), var(--purple), var(--orange));
  filter: blur(32px);
  opacity: 0.55;
  z-index: -1;
  animation: form-glow-spin 5s linear infinite;
  pointer-events: none;
}

/* Formulario */
.alfa-form {
  position: relative;
  z-index: 2;
  background: var(--carbon-grey-950);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  backdrop-filter: blur(8px);
  /* el botón de envío es .btn--full (100% de este ancho) — container-type
     deja que las @container de .btn elijan el asset SVG correcto según el
     ancho real del formulario en cada breakpoint, no el del viewport */
  container-type: inline-size;
}
.alfa-form__title {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.alfa-form__sub {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.form-group { margin-bottom: 1.2rem; }

.form-label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.form-label__req { color: var(--pink-text); }
.form-label--opt {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-size: 0.75rem;
}

.form-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(130, 41, 255, 0.22);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  transition: var(--t);
  outline: 2px solid transparent; /* invisible en modo normal; visible en Windows High Contrast Mode */
  appearance: none;
  -webkit-appearance: none;
}
.form-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-input:focus {
  border-color: var(--purple-strong);
  box-shadow: 0 0 0 3px rgba(130, 41, 255, 0.18);
}
.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(255, 87, 101, 0.15);
}
.form-textarea { resize: vertical; min-height: 88px; }

/* Fieldset para grupo de radios */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.form-radio-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.form-radio { cursor: pointer; }
.form-radio input { display: none; }
.form-radio__label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.42rem 1.1rem;
  border: 1px solid rgba(130, 41, 255, 0.22);
  border-radius: 99px;
  color: var(--text-muted);
  transition: var(--t);
  cursor: pointer;
  user-select: none;
}
.form-radio input:checked + .form-radio__label {
  border-color: var(--purple-strong);
  color: var(--purple-text);
  background: var(--purple-dim);
}
.form-radio:hover .form-radio__label,
.form-radio input:focus-visible + .form-radio__label {
  border-color: rgba(130, 41, 255, 0.5);
  color: var(--text);
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.form-checkbox {
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  align-items: flex-start;
}
.form-checkbox input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--purple-strong);
  cursor: pointer;
}
.form-checkbox__label {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Mensajes de error */
.form-error {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  color: var(--color-error);
  margin-top: 0.35rem;
  min-height: 1.1rem;
}

/* Estado del formulario (éxito / error API) */
.form-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  font-size: 0.9rem;
  text-align: center;
  animation: fade-in 0.4s ease both;
}
.form-status--success {
  background: rgba(34, 249, 55, 0.08);
  border: 1px solid rgba(34, 249, 55, 0.3);
  color: var(--color-success);
}
.form-status--error {
  background: rgba(255, 87, 101, 0.08);
  border: 1px solid rgba(255, 87, 101, 0.3);
  color: var(--color-error);
}
.form-status[hidden] { display: none; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Formulario: todo centrado en el eje horizontal en móvil */
@media (max-width: 768px) {
  .alfa-form__title,
  .alfa-form__sub,
  .form-label,
  .form-error {
    text-align: center;
  }
  .form-radio-group { justify-content: center; }
  .form-checkbox {
    justify-content: center;
    text-align: center;
  }
}

/* ======================== MÓDULOS STATUS SLIDER ======================== */
.modulos-status {
  margin-top: 4rem;
}
.modulos-status__title {
  font-family: var(--ff-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.modulos-slider {
  overflow: hidden;
  position: relative;
}
.modulos-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.mstatus-card {
  flex: 0 0 calc(100% - 0px);
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.mstatus-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--matrix-green-400), var(--matrix-green-200), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.mstatus-card--active::before { opacity: 1; }
.mstatus-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.mstatus-card__num {
  font-family: var(--ff-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
}
.mstatus-badge {
  font-family: var(--ff-display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.mstatus-badge--dev  { color: var(--green);  border-color: rgba(34,249,55,0.4);   background: rgba(34,249,55,0.07); }
.mstatus-badge--soon { color: var(--purple);   border-color: rgba(147, 97, 255, 0.4);  background: rgba(173, 97, 255, 0.07); }
.mstatus-badge--locked { color: var(--pink-text); border-color: rgba(201,27,98,0.4); background: rgba(201,27,98,0.07); }

.mstatus-card__title {
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.mstatus-card__desc {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Barra de progreso cyberpunk */
.mstatus-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mstatus-bar__track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 6px 100%);
}
.mstatus-bar__fill {
  height: 100%;
  width: var(--bar-pct, 0%);
  background: var(--bar-gradient, var(--bar-color, var(--green)));
  box-shadow: 0 0 8px var(--bar-color, var(--green));
  border-radius: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.mstatus-bar__fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background: white;
  opacity: 0.6;
  filter: blur(1px);
}
.mstatus-bar__scan {
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: barScan 2.4s ease-in-out infinite;
}
@keyframes barScan {
  0%   { left: -60%; }
  100% { left: 120%; }
}
.mstatus-bar__pct {
  font-family: var(--ff-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 2.5rem;
  text-align: right;
}

/* Controles del slider */
.modulos-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.modulos-nav__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  width: 2.2rem; height: 2.2rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--t);
  display: flex; align-items: center; justify-content: center;
}
.modulos-nav__btn:hover {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 10px rgba(34,249,55,0.2);
}
.modulos-nav__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.modulos-dots {
  display: flex;
  gap: 0.5rem;
}
.modulos-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--t);
  transform: rotate(45deg);
}
/* El punto visible se queda en 6px (lenguaje visual del slider), pero el
   área pulsable/táctil real se amplía a ~24px (WCAG 2.5.8 Target Size)
   con un pseudo-elemento invisible que desborda el botón sin afectar el
   layout del resto de puntos. */
.modulos-dot::before {
  content: '';
  position: absolute;
  inset: -9px;
}
.modulos-dot--active {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

@media (min-width: 640px) {
  .mstatus-card {
    flex: 0 0 calc(50% - 0.625rem);
  }
}
@media (min-width: 1024px) {
  .mstatus-card {
    flex: 0 0 calc(33.333% - 0.84rem);
  }
}

/* ======================== FOOTER ======================== */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-sub);
  padding: 3rem 1.25rem;
  text-align: center;
}

.footer__tagline {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.footer__legal-link {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t);
}
.footer__legal-link:hover { color: var(--green); }
.footer__legal-sep {
  font-size: 0.72rem;
  color: rgba(169, 157, 174, 0.5);
}
.footer__copy {
  font-size: 0.72rem;
  color: var(--carbon-grey-400);
}

/* Sello de confianza INCIBE Ciberemprende */
.footer__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-sub);
}
.footer__trust-label {
  font-family: var(--ff-ui);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--carbon-grey-400);
}
.footer__trust-link {
  display: inline-flex;
  border-radius: var(--radius);
  transition: transform var(--t), filter var(--t);
}
.footer__trust-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.footer__trust-seal {
  width: 96px;
  height: auto;
  display: block;
}

/* Honeypot: visible en DOM (para bots) pero fuera de pantalla para humanos */
.honeypot-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Visualmente oculto pero accesible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Enlace dentro del formulario */
.form-link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-link:hover { color: var(--text); }

/* ======================== RESPONSIVE (mobile-first) ======================== */

/* ≥ 480px: botones del hero en fila */
@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn { width: auto; }
  .btn--full { width: 100%; }
  .container { padding: 0 1.75rem; }
}

/* Both hero buttons share one width regardless of their own label length.
   .btn's SVG frame is a fixed-aspect-ratio mask stretched to 100% of the
   box — when each button is left to auto-size to its own text ("Únete a
   la Pre-Alfa" vs "Descubre más"), the two boxes end up at different
   aspect ratios and the *same* mask gets stretched by different amounts
   for each, so the frame renders at visibly different proportions even
   though the boxes are the same height. Forcing a shared min-width (sized
   to the longer label) keeps both boxes — and therefore the mask — at
   the same proportions. */
@media (min-width: 480px) {
  .hero__actions .btn {
    min-width: 250px;
  }
}

/* ≥ 600px: features 2 columnas */
@media (min-width: 600px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 768px: ajustes generales de contenedor (el nav sigue en modo móvil
   hasta el breakpoint --nav-desktop de más abajo: a 768px no cabe el
   logo + 6 enlaces + CTA sin comprimirse) */
@media (min-width: 768px) {
  .nav { padding-inline: 2.5rem; }
  .container { padding: 0 2.5rem; }
  .alfa-form { padding: 2.5rem; }
}

/* ≥ 1180px: nav escritorio (logo + enlaces + CTA caben sin comprimirse) */
@media (min-width: 1180px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ≥ 900px: grids de dos columnas */
@media (min-width: 900px) {
  .features { grid-template-columns: repeat(4, 1fr); }

  .modulo__grid {
    grid-template-columns: 1fr 300px;
    gap: 3rem;
  }
  .modulo__badge { order: 0; }
  .badge-card {
    position: sticky;
    top: 6rem;
    padding: 2rem 1.5rem;
  }
  .topic__desc { padding-left: 2.8rem; }

  .section__header { margin-bottom: 4rem; }
}

/* ======================== REDUCCIÓN DE MOVIMIENTO ======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ======================== COOKIE CONSENT BANNER ======================== */
#cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  width: min(680px, calc(100vw - 2rem));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,249,55,0.1);
  animation: cbSlideUp 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
#cookie-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
#cookie-banner.cb--hide {
  animation: cbSlideDown 0.28s ease-in both;
}
@keyframes cbSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cbSlideDown {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
.cb__inner {
  padding: 1.4rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
@media (min-width: 600px) {
  .cb__inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.5rem;
  }
}
.cb__content { flex: 1; }
.cb__title {
  font-family: var(--ff-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.cb__desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}
.cb__link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cb__link:hover { color: var(--text); }

/* Panel de configuración */
.cb__config {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}
.cb__cat {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.cb__cat-info { flex: 1; }
.cb__cat-name {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.cb__cat-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cb__toggle-on {
  font-family: var(--ff-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--green);
  border: 1px solid rgba(34,249,55,0.4);
  background: rgba(34,249,55,0.07);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Botones de acción */
.cb__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 160px;
}
@media (min-width: 600px) {
  .cb__actions {
    align-items: stretch;
  }
}
.cb__btn {
  font-family: var(--ff-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--t);
  border: 1px solid;
  text-align: center;
  white-space: nowrap;
}
/* Los 3 botones tienen el mismo peso visual, diferenciados solo por relleno */
.cb__btn--accept {
  background: rgba(34,249,55,0.12);
  border-color: rgba(34,249,55,0.5);
  color: var(--green);
}
.cb__btn--accept:hover {
  background: rgba(34,249,55,0.22);
  box-shadow: 0 0 12px rgba(34,249,55,0.2);
}
.cb__btn--reject {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.cb__btn--reject:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.cb__btn--config {
  background: transparent;
  border-color: var(--border-sub);
  color: var(--text-muted);
  font-weight: 400;
}
.cb__btn--config:hover {
  border-color: var(--border);
  color: var(--text-muted);
}

/* ========================
   PAINS — Option B: Full-width alternating panels
======================== */
.pains-section {
  background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color));
}

.pains-stack {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  overflow-x: hidden;
}

/* Panel base */
.pain-panel {
  position: relative;
  overflow: hidden;
  padding: 2.75rem 0;
  border-top: 1px solid var(--border-sub);
  transition: opacity 0.75s ease, transform 0.75s ease, background var(--t);
}
.pain-panel:last-child { border-bottom: 1px solid var(--border-sub); }

.pain-panel:hover {
  background: rgba(255, 255, 255, 0.012);
}

/* Giant background error code */
.pain-panel__bg-num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 900;
  color: var(--panel-color, var(--purple));
  opacity: 0.1;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pain-panel--left  .pain-panel__bg-num { right: 1.25rem; }
.pain-panel--right .pain-panel__bg-num { left: 1.25rem; }

/* Variante para cuando el "código de error" es en realidad un comando largo
   ($ ./it_infra_soporte) — mismo tratamiento (veiled, watermark), pero con
   tipografía monoespaciada y mucho más pequeña, si no el string se saldría
   varias pantallas de ancho. */
.pain-panel__bg-num--code {
  font-family: var(--ff-display); /* Orbitron, igual que los headings principales */
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0;
}
/* En mobile el mínimo del clamp (2.2rem) ya no deja hueco: el texto velado
   choca con la lista real (ver programas de empresas.html). Lo bajamos solo
   ahí; en desktop hay sitio de sobra. */
@media (max-width: 600px) {
  .pain-panel__bg-num--code { font-size: clamp(1.2rem, 6vw, 1.8rem); }
}

/* Inner — reuses .container for max-width & padding */
.pain-panel__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.pain-panel--right .pain-panel__inner { flex-direction: row-reverse; }

/* Color accent bar */
.pain-panel__accent {
  width: 3px;
  min-height: 90px;
  align-self: stretch;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--panel-color, var(--purple)), transparent);
}

/* Content */
.pain-panel__content { flex: 1; }
.pain-panel--right .pain-panel__content { text-align: right; }

.pain-panel__code {
  font-family: var(--ff-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--panel-color, var(--purple-text));
  text-shadow: 0 0 10px var(--panel-color, var(--purple));
  margin-bottom: 0.65rem;
  opacity: 0.85;
}

.pain-panel__title {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.pain-panel__desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.72;
  max-width: 600px;
}
.pain-panel--right .pain-panel__desc { margin-left: auto; }

/* Slide-in animations — override .reveal's translateY */
.pain-panel.reveal               { transform: translateX(-52px); }
.pain-panel--right.reveal        { transform: translateX(52px);  }
.pain-panel.reveal.visible       { opacity: 1; transform: translateX(0); }

/* Transition text */
.pains__transition {
  text-align: center;
  margin-top: 4rem;
  padding-bottom: 0.5rem;
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 0 32px rgba(34, 249, 55, 0.35);
}

/* Mobile: drop alternating direction */
@media (max-width: 600px) {
  .pain-panel--right .pain-panel__inner  { flex-direction: row; }
  .pain-panel--right .pain-panel__bg-num { left: auto; right: 1.25rem; }
  .pain-panel--right .pain-panel__desc   { margin-left: 0; }
  .pain-panel.reveal,
  .pain-panel--right.reveal              { transform: translateY(22px); }
}
/* ============================================================
   VANGUARD ACADEMY — HERO TERMINAL
   ============================================================ */

/* ── Hero override ───────────────────────────────────────── */
.hero--terminal {
  padding: 5.5rem 1.25rem 4rem;
  align-items: center;
  justify-content: center;
}

.hero--terminal .hero__canvas { opacity: 1; }

/* ── Flash de pantalla al detectar BREACH ─────────────────── */
.hero--terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
@keyframes screenFlash {
  0%   { opacity: 1; background: rgba(109, 40, 217, 0.08); }
  60%  { opacity: 1; background: rgba(217, 40, 40, 0.03); }
  100% { opacity: 0; }
}
.hero--terminal.is-breach::after {
  animation: screenFlash 0.65s ease forwards;
}

/* ── Ventana de terminal ─────────────────────────────────── */
.terminal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 740px;
  background: var(--bg-2);
  border: 2px solid rgba(109, 40, 217, 0.35);
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.08),
    0 0 20px rgba(109, 40, 217, 0.18),
    0 0 60px rgba(109, 40, 217, 0.08),
    inset 0 0 120px rgba(20, 5, 40, 0.5);
  overflow: hidden;
}

/* Scanlines CRT */
.terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  pointer-events: none;
  z-index: 20;
}

/* Viñeta CRT */
.terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  z-index: 21;
}

/* ── Barra de título ─────────────────────────────────────── */
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 1rem;
  background: var(--bg);
  border-bottom: 2px solid rgba(109, 40, 217, 0.7);
  border-radius: 0;
  user-select: none;
  position: relative;
  z-index: 22;
}

.terminal__bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-glow, var(--purple)), transparent);
}

.terminal__dot { display: none; }

.terminal__title {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--purple-text);
  margin-left: 0;
  width: 100%;
  text-align: center;
}

/* ── Zona de output ─────────────────────────────────────── */
.terminal__output {
  padding: 1.4rem 1.6rem 0.6rem;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  position: relative;
  z-index: 22;
}

/* Una línea del terminal */
.term-line {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  line-height: 2;
  min-height: 1.5em;
}

.term-line__prompt {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 5px rgba(34, 249, 55, 0.55));
  flex-shrink: 0;
  user-select: none;
}

.term-line__text {
  flex: 1;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-shadow: none;
  text-align: left;
}

/* Línea de acento (ámbar) */
.term-line--accent .term-line__prompt {
  color: var(--color-warning);
  text-shadow: 0 0 6px rgba(255, 248, 13, 0.6);
}
.term-line--accent .term-line__text {
  color: rgba(255, 220, 100, 0.95);
  text-shadow: 0 0 8px rgba(255, 248, 13, 0.4);
  letter-spacing: 0.08em;
}

/* ── Badges de estado ──────────────────────────────────── */
.term-line__status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.07rem 0.38rem;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}
.term-line__status.is-visible { opacity: 1; }

.term-s--ok {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(34, 249, 55, 0.4);
  filter: drop-shadow(0 0 4px rgba(34, 249, 55, 0.4));
}
.term-s--warn {
  color: var(--color-warning);
  border: 1px solid rgba(255, 248, 13, 0.4);
}
.term-s--fail {
  color: var(--color-error);
  border: 1px solid rgba(255, 87, 101, 0.4);
}
.term-s--breach {
  color: var(--color-warning);
  border: 1px solid rgba(255, 248, 13, 0.5);
  animation: badgeFlash 0.65s step-end 2;
}
.term-s--ready {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(34, 249, 55, 0.4);
  filter: drop-shadow(0 0 6px rgba(34, 249, 55, 0.6));
}
@keyframes badgeFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Cursor parpadeante ──────────────────────────────────── */
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--green);
  box-shadow: 0 0 6px rgba(34, 249, 55, 0.8);
  animation: termCursorBlink 0.65s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}
@keyframes termCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Línea divisora ──────────────────────────────────────── */
.terminal__divider {
  height: 1px;
  margin: 0.4rem 1.5rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--edgerunner-purple-700),
    transparent
  );
  opacity: 1;
}

/* ── Logo ───────────────────────────────────────────────── */
.terminal__logo {
  padding: 1.7rem 3rem 1.5rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  position: relative;
  z-index: 22;
}
.terminal__logo.is-visible { opacity: 1; }

.terminal__logo-img {
  display: block;
  width: min(360px, 72%);
  height: auto;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 18px rgba(34, 249, 55, 0.45))
    drop-shadow(0 0 40px rgba(34, 249, 55, 0.15))
    brightness(0.95) saturate(0.8);
}

.terminal__logo-img.glitch-in {
  animation: logoScanIn 0.45s steps(5) forwards;
}
@keyframes logoScanIn {
  0%   { clip-path: inset(96% 0 0 0);      transform: skewX(-3deg);   }
  20%  { clip-path: inset(64% 2px 8%  0);  transform: skewX( 2deg);   }
  40%  { clip-path: inset(33% 0  35% 2px); transform: skewX(-1.5deg); }
  60%  { clip-path: inset(12% 0  52% 0);   transform: skewX( 1deg);   }
  80%  { clip-path: inset( 0  0  18% 0);   transform: skewX(-0.5deg); }
  100% { clip-path: inset( 0  0   0  0);   transform: skewX(0);       }
}

/* ── Subtítulo typewriter ────────────────────────────────── */
.terminal__subtitle {
  text-align: center;
  padding: 0.2rem 1.5rem 1rem;
  font-family: var(--ff-body);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 500;
  color: var(--purple-text, var(--text));
  letter-spacing: 0.08em;
  min-height: 2em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
  z-index: 22;
}
.terminal__subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Acciones ───────────────────────────────────────────── */
.terminal__actions {
  display: flex;
  gap: 1rem;
  padding: 1.3rem 1.5rem 1.7rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
  z-index: 22;
}
.terminal__actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll indicator */
.hero__terminal-group {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .terminal__output  { font-size: 0.7rem;  padding: 1rem 1.1rem 0.5rem; }
  .terminal__divider { margin: 0.4rem 1.1rem 0; }
  .terminal__logo    { padding: 1.3rem 1.1rem 0.5rem; }
  .terminal__logo-img { width: min(270px, 80%); }
  .terminal__actions { padding: 1rem 1.1rem 1.4rem; gap: 0.75rem; }
}


/* ============================================================
   FORMULARIO ALFA — TERMINAL STYLE
   ============================================================ */

/* ── Ventana terminal del formulario ─────────────────────── */
.term-form-window {
  background: var(--bg-2);
  border: 2px solid rgba(109, 40, 217, 0.35);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.08),
    0 0 20px rgba(109, 40, 217, 0.18),
    0 0 60px rgba(109, 40, 217, 0.08),
    inset 0 0 120px rgba(20, 5, 40, 0.5);
}

/* ── Barra del formulario ────────────────────────────────── */
.term-form-bar {
  background: var(--bg);
  border-bottom: 2px solid rgba(109, 40, 217, 0.7);
  padding: 0.4rem 1rem;
  position: relative;
  z-index: 1;
}

.term-form-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-glow, var(--purple)), transparent);
}

.term-form-bar__title {
  display: block;
  color:var(--purple-text);
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* ── Formulario interno ──────────────────────────────────── */
.term-form {
  padding: 1.2rem 1.4rem 1.4rem;
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.term-form .alfa-form__title,
.term-form .alfa-form__sub { display: none; }

/* ── Grupos de campo ─────────────────────────────────────── */
.term-form .form-group { margin-bottom: 1rem; }

/* ── Labels ──────────────────────────────────────────────── */
.term-form .form-label {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--text);
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.term-form .form-label::before {
  content: '> ';
  color: var(--green);
}

.term-form .form-label .form-label__req {
  color: var(--color-error);
}

.term-form .form-label--opt {
  color: rgba(169, 157, 174, 0.4);
  font-size: 0.65rem;
}

/* ── Inputs ──────────────────────────────────────────────── */
.term-form .form-input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid rgba(109, 40, 217, 0.35);
  border-radius: 0;
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.84rem;
  padding: 0.45rem 0.7rem 0.45rem 0.3rem;
  outline: none;
  caret-color: var(--matrix-green-700);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.03em;
}

.term-form .form-input::placeholder {
  color: var(--text-muted);
  font-family: var(--ff-ui);
  font-style: normal;
}

.term-form .form-input:focus {
  border-bottom-color: rgba(109, 40, 217, 0.8);
  box-shadow: 0 2px 0 0 rgba(109, 40, 217, 0.2);
  background: rgba(20, 10, 40, 0.9);
}

.term-form .form-textarea {
  border: 1px solid rgba(109, 40, 217, 0.25);
  border-radius: 0;
  resize: vertical;
  min-height: 70px;
}

.term-form .form-textarea:focus {
  border-color: rgba(109, 40, 217, 0.6);
  box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.12);
}

/* ── Errores ─────────────────────────────────────────────── */
.term-form .form-error {
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  color: var(--color-error);
}

.term-form .form-error:not(:empty)::before { content: '! '; }

/* ── Fieldset nivel de experiencia ───────────────────────── */
.term-form .form-fieldset {
  border: 1px solid rgba(109, 40, 217, 0.2);
  border-radius: 0;
  padding: 0.6rem 0.8rem 0.5rem;
}

.term-form .form-fieldset legend.form-label { padding: 0 0.4rem; }

/* ── Radio buttons ───────────────────────────────────────── */
.term-form .form-radio-group {
  display: flex;
  flex-wrap: wrap;
}

.term-form .form-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 1.2rem;
}

.term-form .form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.term-form .form-radio__label {
  font-family: 'Radhjani', sans-serif;
  font-size: 0.76rem;
  color: rgba(169, 157, 174, 0.5);
  letter-spacing: 0.06em;
  transition: color 0.15s ease;
  padding: 0.25rem 0.4rem;
}

.term-form .form-radio__label::before {
  content: '[ ] ';
  color: var(--text-dim);
}

.term-form .form-radio input[type="radio"]:checked + .form-radio__label {
  color: var(--text);
}

.term-form .form-radio input[type="radio"]:checked + .form-radio__label::before {
  content: '[X] ';
  color: var(--matrix-green-700);
}

.term-form .form-radio:hover .form-radio__label {
  color: rgba(169, 157, 174, 0.8);
}

/* ── Checkboxes ──────────────────────────────────────────── */
.term-form .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.term-form .form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.term-form .form-checkbox__indicator {
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--text);
  margin-top: 0.05em;
  transition: color 0.15s ease;
  user-select: none;
  min-width: 2.2em;
}

.term-form .form-checkbox input[type="checkbox"]:checked ~ .form-checkbox__indicator {
  color: var(--green);
  text-shadow: 0 0 5px rgba(34, 249, 55, 0.5);
}

.term-form .form-checkbox__label {
  font-family: var(--ff-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  transition: color 0.15s ease;
}

.term-form .form-checkbox:hover .form-checkbox__label {
  color: var(--text);
}

.term-form .form-link {
  color: var(--green-text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(249, 168, 212, 0.35);
}

.term-form .form-link:hover { color: var(--green-text); }

/* ── hCaptcha ────────────────────────────────────────────── */
.term-form .captcha-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(109, 40, 217, 0.35);
  border-bottom: 2px solid rgba(109, 40, 217, 0.6);
  padding: 0.5rem 0;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.term-form .captcha-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 40, 217, 0.4), transparent);
}

.term-form .captcha-wrapper:has(iframe[data-hcaptcha-response]) {
  border-color: var(--purple-dim);
  border-bottom-color: var(--purple-dim);
}

.term-form .h-captcha {
  filter: grayscale(0.15) brightness(0.88) hue-rotate(5deg);
  display: block;
}

/* ── Estado del formulario ───────────────────────────────── */
.term-form .form-status {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  border-radius: 0;
  padding: 0.6rem 0.8rem;
  margin-top: 0.8rem;
}

.term-form .form-status--ok {
  color: var(--text);
  border: 1px solid rgba(109, 40, 217, 0.35);
}

.term-form .form-status--error {
  color: var(--color-error);
  border: 1px solid rgba(255, 87, 101, 0.35);
}

/* ======================== PAGE FADE TRANSITION ======================== */
#pageGlitch {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  animation: fade-enter 0.4s ease-out forwards;
}

#pageGlitch.is-leaving {
  animation: fade-leave 0.3s ease-in forwards;
}

@keyframes fade-enter {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-leave {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ======================== LOADER HUD ======================== */
body.is-loading {
  overflow: hidden;
  height: 100vh;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(34, 249, 55, 0.08), transparent 60%),
    var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 249, 55, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 249, 55, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

.site-loader__scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.site-loader__frame {
  position: absolute;
  inset: clamp(1rem, 4vw, 3rem);
  pointer-events: none;
}

.site-loader__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--green);
  opacity: 0.6;
  filter: drop-shadow(0 0 6px rgba(34, 249, 55, 0.5));
}
.site-loader__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.site-loader__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.site-loader__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.site-loader__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.site-loader__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: min(380px, 86vw);
  padding: 0 1.5rem;
}

.site-loader__tag {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green-text-dim);
  opacity: 0.85;
}

.site-loader__mark {
  width: min(220px, 60vw);
}
/* Versión corta (visitas repetidas): sin isotipo, solo texto + barra */
.site-loader.is-short .site-loader__mark {
  display: none;
}
.loader-mark__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.loader-mark__path {
  fill: var(--matrix-green-200);
  fill-opacity: 0;
  stroke: var(--matrix-green-300);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(34, 249, 55, 0.8)) drop-shadow(0 0 16px rgba(34, 249, 55, 0.4));
  transition: fill-opacity 0.6s ease;
}
.loader-mark__path--accent {
  stroke: var(--matrix-green-400);
  filter: drop-shadow(0 0 5px rgba(34, 249, 55, 0.95)) drop-shadow(0 0 20px rgba(34, 249, 55, 0.55));
}
.loader-mark__path.is-drawn { fill-opacity: 1; }

.site-loader.is-flicker .loader-mark__path {
  animation: loader-flicker 0.22s steps(2, jump-none) 2;
}

.site-loader__status {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--ff-display);
}
.site-loader__label {
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--text-muted);
}
.site-loader__pct {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 12px rgba(34, 249, 55, 0.55);
  min-width: 2.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.site-loader__pct::after {
  content: '%';
  font-size: 0.85rem;
  margin-left: 2px;
  opacity: 0.7;
}

.site-loader__bar {
  width: 100%;
  height: 10px;
  border: 1px solid var(--border-sub);
  background: rgba(255, 255, 255, 0.03);
  padding: 2px;
}
.site-loader__bar-fill {
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(90deg, rgba(9, 6, 13, 0.85) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, var(--orange), var(--pink), var(--purple));
  box-shadow: 0 0 10px rgba(201, 27, 98, 0.5), 0 0 18px rgba(139, 92, 246, 0.4);
}

.site-loader__hint {
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.55;
  text-transform: uppercase;
}

@keyframes loader-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader { transition: opacity 0.2s linear; }
  .loader-mark__path { transition: none; }
  .site-loader.is-flicker .loader-mark__path { animation: none; }
}

/* ======================== PROYECTO HUD ======================== */
.proyecto-section {
  background: linear-gradient(to bottom, var(--bg-primary-start-color), var(--bg-primary-end-color));
}

.proyecto-hud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.proyecto-manifest .section__title   { text-align: left; }
.proyecto-manifest .section__desc    { text-align: left; }

.proyecto-status-bar {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-sub);
  flex-wrap: wrap;
}
.proyecto-status-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.proyecto-status-key {
  font-family: var(--ff-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.proyecto-status-val {
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
}

/* Módulos */
.proyecto-modules__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-sub);
  background: rgba(130, 41, 255, 0.07);
}
.proyecto-modules__label {
  font-family: var(--ff-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--purple-text);
}
.proyecto-modules__count {
  font-family: var(--ff-display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

.proyecto-modules__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 480px) {
  .proyecto-modules__grid { grid-template-columns: repeat(2, 1fr); }
}

.proyecto-module__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center;
}
.proyecto-module__icon--academy  { background-image: url('../assets/images/SVG/icons/academy-icon.svg'); }
.proyecto-module__icon--labs     { background-image: url('../assets/images/SVG/icons/labs-icon.svg'); }
.proyecto-module__icon--porfolio { background-image: url('../assets/images/SVG/icons/porfolio-icon.svg'); }
.proyecto-module__icon--community{ background-image: url('../assets/images/SVG/icons/community-icon.svg'); }
.proyecto-module__icon.reveal {
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.4s ease, filter 0.35s ease;
}
.proyecto-module__icon.reveal.visible {
  opacity: 1;
  transform: scale(1);
}
.proyecto-modules__grid article:nth-child(2) .proyecto-module__icon { transition-delay: 0.1s; }
.proyecto-modules__grid article:nth-child(3) .proyecto-module__icon { transition-delay: 0.2s; }
.proyecto-modules__grid article:nth-child(4) .proyecto-module__icon { transition-delay: 0.3s; }
.cyber-card--square:hover .proyecto-module__icon.visible {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(3, 226, 29, 0.65));
}
@media (prefers-reduced-motion: reduce) {
  .proyecto-module__icon.reveal {
    opacity: 1;
    transform: none;
    transition: filter 0.35s ease;
  }
  .proyecto-modules__grid article:nth-child(2) .proyecto-module__icon,
  .proyecto-modules__grid article:nth-child(3) .proyecto-module__icon,
  .proyecto-modules__grid article:nth-child(4) .proyecto-module__icon { transition-delay: 0s; }
}

.proyecto-module__id {
  font-family: var(--ff-display);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--purple);
  flex-shrink: 0;
  min-width: 3.5rem;
  padding-top: 0.18rem;
  opacity: 0.7;
}
.proyecto-module__name {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.proyecto-module__desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}
/* Responsive: single column en móvil */
@media (max-width: 900px) {
  .proyecto-hud { grid-template-columns: 1fr; gap: 2.5rem; }
  .proyecto-manifest .section__title { font-size: clamp(1.8rem, 5vw, 2.4rem); }
}

/* ======================== EMPRESAS ======================== */
.empresas-hero__stat {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: var(--green);
  text-shadow: 0 0 24px rgba(34, 249, 55, 0.45);
  line-height: 1;
  margin-bottom: 0.4rem;
}

/* .programas-grid / .programa-card (caja individual) quedaron obsoletas: la
   sección "programas" de empresas.html ahora reutiliza el componente
   .pain-panel (full-width, stack) de la sección de pains — ver ese bloque
   más abajo. Solo queda .programa-card__list porque el contenido de cada
   panel sigue siendo una lista. */
.programa-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: fit-content; /* se ciñe al ítem más ancho, no ocupa las .container completas */
  max-width: 600px;
}
/* Igual que .pain-panel--right .pain-panel__desc: en los paneles "right" el
   contenido se empuja al lado derecho, pegado a la barra de acento, en vez
   de flotar en el centro con hueco muerto hasta la barra. width:fit-content
   (arriba) + margin-left:auto mueven la caja; row-reverse + text-align
   aquí hacen que el texto de cada ítem también "entre" desde la barra. */
.pain-panel--right .programa-card__list { margin-left: auto; }
.pain-panel--right .programa-card__list li {
  flex-direction: row-reverse;
  text-align: right;
}
.programa-card__list li {
  font-family: var(--ff-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.programa-card__list li::before {
  content: '›';
  color: var(--panel-color, var(--purple));
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.empresas-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.75rem;
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.empresas-perks li { display: flex; align-items: center; gap: 0.8rem; }

/* ======================== NOSOTROS ======================== */
.nosotros-section {
  background: linear-gradient(to bottom, var(--bg-primary-start-color), var(--bg-primary-end-color));
}

/* ── Stats bar ──────────────────────────────────── */
.nosotros__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-sub);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.nosotros__stat {
  background: var(--bg-card);
  text-align: center;
  padding: 1.5rem 1rem;
}

.nosotros__stat-val {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900;
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

.nosotros__stat-label {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ── Values chips ───────────────────────────────── */
.nosotros__chips {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.nosotros__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-family: var(--ff-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: var(--t);
}

.nosotros__chip:hover {
  border-color: rgba(34, 249, 55, 0.35);
  color: var(--text);
}


/* Section container widened so the two-column cards have less
   dead margin and more room for the giant names to fit */
.nosotros-section .container {
  max-width: 1500px;
}

/* ── Team cards — cyber-card horizontal SVG shape (vg-card-horizontal) ── */
.nosotros__team-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Text column: keep the base centered column, just left-align and
   indent past the photo region. Doesn't touch `padding` (the horizontal
   variant sets that as a shorthand later in the file) so there's no
   cascade-order fight — only align-items/text-align are overridden here. */
.team-card .cyber-card__content {
  container-type: inline-size;
  align-items: flex-start;
  text-align: left;
}

.team-card__info {
  margin-left: 44%;
  /* .cyber-card__content overrides align-items to flex-start for this card
     (see above), so this column no longer stretches to fill the remaining
     row width — it shrinks to its own content instead. Long names like
     "Alejandro Sánchez" then sized past the card's right edge and broke out
     of the frame. Pairing an explicit width with the margin above pins it
     back to the actual remaining space. */
  width: 56%;
  min-width: 0;
}

/* Photo layer: sits as a sibling of .cyber-card__glyphs/.cyber-card__content,
   sized to the SAME box as those (the glyphs-frame canvas, 1878.48×1278.59 —
   set via --card-aspect). It's masked with the *same* --card-shape /
   --card-mask-size pair the ::after fill layer uses, which is how this
   design system already reconciles the mask SVG's own, smaller canvas
   (1849.08×1238.35) against the glyphs canvas — reusing those variables
   means the photo's silhouette is pixel-true to the real mask, not a
   guessed corner shape. A plain rectangular clip then windows it down to
   the left portion of the card; DOM order (before .cyber-card__glyphs)
   lets the frame linework paint on top of the photo at the shared edges. */
.team-card__photo-wrap {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--card-shape);
  mask-image: var(--card-shape);
  -webkit-mask-size: var(--card-mask-size);
  mask-size: var(--card-mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: inset(0 58% 0 0);
}

/* Sized to the VISIBLE slice only (matches the clip-path below), not the
   full card box — .team-card__photo-wrap is sized to the whole card so
   its mask lines up with the SVG, but cover-fitting the image to that
   full width put the actual photo off-center once the right 58% got
   clipped away. Framing to the true visible aspect fixes centering. */
.team-card__photo {
  position: absolute;
  inset: 0;
  width: 42%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 0.5s ease;
}

/* Photo-wrap's clip-path already windows the card to the left 42% — the
   scaled image just reveals more of itself within that same boundary,
   it never spills past the frame. */
.team-card:hover .team-card__photo {
  transform: scale(1.06);
}

/* Straight divider at the clip boundary — the mask's real edge is a
   jagged notch pattern (only meaningful at the card's own perimeter),
   so the photo/text seam is a plain line rather than an invented shape. */
.team-card__divider {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 42%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--card-glyph-color, var(--green)), transparent);
  box-shadow: 0 0 10px var(--card-shadow, rgba(34, 249, 55, 0.5));
}

.team-card__name {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  /* scaled off the card's own width (not viewport) so long names never overflow or split mid-word */
  font-size: clamp(1.1rem, 9cqw, 1.9rem);
  line-height: 1.02;
  color: var(--card-glyph-color, var(--green));
  text-shadow: 0 0 16px var(--card-shadow, rgba(34, 249, 55, 0.4));
  text-wrap: balance;
  margin-bottom: 0.4rem;
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), filter 0.35s ease;
}

/* Same pop the cyber-card icons get on card hover (.cyber-card--square:hover
   .proyecto-module__icon.visible), applied to the team member's name. */
.team-card:hover .team-card__name {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px var(--card-shadow, rgba(34, 249, 55, 0.65)));
}

.team-card__role {
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: clamp(0.7rem, 3cqw, 0.85rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.team-card__bio {
  font-size: clamp(0.72rem, 2.3cqw, 0.85rem);
  color: var(--text-muted);
  line-height: 1.55;
  text-wrap: pretty;
  /* fixed card aspect-ratio (SVG frame) can't grow with content, so bio
     is clamped instead of risking overflow past the mask */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Value icon tag (reused) ───────────────────── */
.nosotros__value-icon {
  font-family: var(--ff-ui);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--vi-color, var(--green-text));
  background: var(--vi-dim, var(--green-dim));
  border: 1px solid color-mix(in srgb, var(--vi-color, var(--green)) 30%, transparent);
  border-radius: var(--radius);
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .nosotros__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stack to one column before it gets tight — the horizontal card's
   aspect-ratio is fixed by its SVG frame at any width, so a single
   stacked card still reads as a wide landscape shape (no need to
   flip the photo+text row to a column). */
@media (max-width: 900px) {
  .nosotros__team-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .team-card__bio {
    -webkit-line-clamp: 3;
  }
}


/* ============================================================
   MÓDULOS CATÁLOGO — página modulos.html
   ============================================================ */

/* ── Stats del hero (bajo la ventana terminal) ─── */
.hero__catalog-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 1.25rem;
  padding: 0.7rem 1.5rem;
  background: rgba(11, 8, 12, 0.75);
  border: 1px solid rgba(34, 249, 55, 0.14);
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  backdrop-filter: blur(8px);
}
.hcs-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hcs-val {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  text-shadow: 0 0 10px rgba(34, 249, 55, 0.5);
}
.hcs-item--dev .hcs-val    { color: var(--purple); text-shadow: 0 0 10px rgba(130, 41, 255, 0.5); }
.hcs-item--locked .hcs-val { color: var(--pink-text);   text-shadow: 0 0 10px rgba(201, 27, 98, 0.5); }
.hcs-lbl {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.hcs-sep {
  color: rgba(34, 249, 55, 0.25);
  font-size: 0.7rem;
}

/* ── Sección catálogo ────────────────────────────── */
.mcat-section {
  background: linear-gradient(to bottom, var(--bg-3), var(--bg));
}

/* ── Controles de filtro ──────────────────────────── */
.mcat-filter {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(11, 8, 12, 0.6);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

/* Línea de comando activa */
.mcat-cmd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.35rem 0.6rem;
  background: rgba(34, 249, 55, 0.03);
  border: 1px solid rgba(34, 249, 55, 0.09);
  border-left: 2px solid rgba(34, 249, 55, 0.3);
  border-radius: var(--radius);
}
.mcat-cmd__prompt { color: var(--green); }

.mcat-filter__row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mcat-filter__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1;
}
.mcat-filter__group--tags { align-items: center; }

.mcat-filter__label {
  font-family: var(--ff-display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  padding-right: 0.65rem;
  margin-right: 0.1rem;
}

/* Chip / botón HUD */
.mcat-chip {
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  background: transparent;
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t), text-shadow var(--t);
  position: relative;
  isolation: isolate;
  line-height: 1;
}
/* Border (::before) + fill (::after) follow the clip-path shape.
   box-shadow:inset no sirve porque clip-path corta la caja rectangular. */
.mcat-chip::before,
.mcat-chip::after {
  content: '';
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 92% 100%, 0 100%);
  transition: background var(--t);
  pointer-events: none;
}
.mcat-chip::before {
  inset: 0;
  background: rgba(255, 255, 255, 0.09);
  z-index: -2;
}
.mcat-chip::after {
  inset: 1px;
  background: rgba(255, 255, 255, 0.03);
  z-index: -1;
}
.mcat-chip:hover {
  color: var(--green-text);
}
.mcat-chip:hover::before {
  background: rgba(34, 249, 55, 0.38);
}
.mcat-chip:hover::after {
  background: rgba(34, 249, 55, 0.06);
}
/* Texto oscuro sobre relleno sólido — mismo criterio de contraste que
   .btn--primary (~9:1) en vez de texto verde sobre fondo verde translúcido,
   que no pasaba WCAG AA. */
.mcat-chip--active,
.mcat-chip[aria-checked="true"],
.mcat-chip[aria-pressed="true"] {
  color: var(--edgerunner-purple-950);
  text-shadow: none;
  font-weight: 800;
}
.mcat-chip--active::before,
.mcat-chip[aria-checked="true"]::before,
.mcat-chip[aria-pressed="true"]::before {
  background: var(--green);
}
.mcat-chip--active::after,
.mcat-chip[aria-checked="true"]::after,
.mcat-chip[aria-pressed="true"]::after {
  background: var(--matrix-green-600);
}
.mcat-chip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.mcat-chip:focus-visible::before,
.mcat-chip:focus-visible::after {
  clip-path: none;
  border-radius: 2px;
}
/* Tags: mismo componente base que los chips de nivel, pero con acento azul
   (en vez de verde) para que las dos filas de filtro (NIVEL / TAGS) se
   distingan de un vistazo, no solo por la forma con muesca. */
.mcat-chip--tag {
  border-radius: 3px;
  font-size: 0.67rem;
  padding: 0.22rem 0.6rem;
}
.mcat-chip--tag::before,
.mcat-chip--tag::after {
  clip-path: none;
  border-radius: 3px;
}
.mcat-chip--tag:hover {
  color: var(--blue-text);
}
.mcat-chip--tag:hover::before {
  background: rgba(59, 158, 255, 0.38);
}
.mcat-chip--tag:hover::after {
  background: rgba(59, 158, 255, 0.06);
}
.mcat-chip--tag.mcat-chip--active,
.mcat-chip--tag[aria-checked="true"],
.mcat-chip--tag[aria-pressed="true"] {
  color: var(--ultraviolet-950);
}
.mcat-chip--tag.mcat-chip--active::before,
.mcat-chip--tag[aria-checked="true"]::before,
.mcat-chip--tag[aria-pressed="true"]::before {
  background: var(--blue);
}
.mcat-chip--tag.mcat-chip--active::after,
.mcat-chip--tag[aria-checked="true"]::after,
.mcat-chip--tag[aria-pressed="true"]::after {
  background: var(--electric-Blue-600);
}

/* Contador de resultados */
.mcat-count {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ff-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--green);
  white-space: nowrap;
  margin-left: auto;
  padding: 0.28rem 0.75rem;
  background: rgba(34, 249, 55, 0.05);
  border: 1px solid rgba(34, 249, 55, 0.22);
  border-radius: 2px;
}
.mcat-count__num   { font-size: 1rem; line-height: 1; }
.mcat-count__text  { color: var(--text-muted); font-size: 0.62rem; }
.mcat-count__bracket { color: rgba(34, 249, 55, 0.4); }

/* ── Grid de cards ───────────────────────────────── */
.mcat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@keyframes gridScan {
  0%   { filter: brightness(0.75) saturate(1.8); }
  60%  { filter: brightness(0.9); }
  100% { filter: none; }
}
.mcat-grid--scanning { animation: gridScan 0.38s ease; }

/* ── Aviso de error al cargar data/modulos.json (sin datos que mostrar) ── */
.mcat-load-error {
  grid-column: 1 / -1;
  padding: 1.5rem;
  border: 1px solid rgba(255, 87, 101, 0.3);
  background: rgba(255, 87, 101, 0.08);
  color: var(--color-error);
  font-family: var(--ff-ui);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  border-radius: var(--radius-lg);
}
.mcat-load-error code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* ── Card de módulo ──────────────────────────────── */
.mcat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color var(--t), box-shadow var(--t);
}

/* Línea superior según estado */
.mcat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  pointer-events: none;
}
.mcat-card--completado::before {
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.7;
}
.mcat-card--desarrollo::before {
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  animation: devPulse 2.2s ease-in-out infinite;
}
.mcat-card--proximamente::before {
  background: linear-gradient(90deg, transparent, var(--text), transparent);
  opacity: 0.5;
}
@keyframes devPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.mcat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.mcat-card--completado:hover  { border-color: rgba(34, 249, 55, 0.28); }
.mcat-card--desarrollo:hover  { border-color: rgba(124, 58, 237, 0.4); }
.mcat-card--proximamente:hover { border-color: rgba(120, 114, 117, 0.28); }
.mcat-card--proximamente { opacity: 0.72; }

/* Cabecera de card */
.mcat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mcat-card__num {
  font-family: var(--ff-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Badge de estado */
.mcat-badge {
  font-family: var(--ff-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.mcat-badge--completado  { color: var(--green-text);  border-color: rgba(34, 249, 55, 0.4);   background: rgba(34, 249, 55, 0.07); }
.mcat-badge--desarrollo  { color: var(--purple-text); border-color: rgba(124, 58, 237, 0.4); background: rgba(124, 58, 237, 0.07); }
.mcat-badge--proximamente { color: var(--text-muted);   border-color: rgba(201, 27, 98, 0.4);  background: rgba(201, 27, 98, 0.07); }

/* Cuerpo de card: anillo + info */
.mcat-card__body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Anillo de progreso circular */
.mring {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.mring__bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 6;
}
.mring__fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.mring__pct {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* Info textual de la card */
.mcat-card__info { flex: 1; min-width: 0; }

.mcat-card__title {
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.mcat-card__desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Footer: nivel + tags */
.mcat-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mcat-card__level {
  font-family: var(--ff-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  padding: 0.18rem 0.5rem;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mcat-card__level--principiante { color: var(--implant-turquoise-300); border-color: var(--implant-turquoise-300);  background: rgba(34, 206, 249, 0.05); }
.mcat-card__level--intermedio   { color: var(--danger-yellow-300);  border-color: var(--danger-yellow-300); background: rgba(255, 242, 59, 0.05); }
.mcat-card__level--avanzado     { color: var(--attack-red-300); border-color: var(--attack-red-300); background: rgba(196, 0, 0, 0.05); }

.mcat-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.mcat-tag {
  font-family: var(--ff-ui);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  padding: 0.13rem 0.42rem;
}

/* Stats de la card */
.mcat-card__stats {
  display: flex;
  border-top: 1px solid var(--border-sub);
  padding-top: 0.7rem;
  margin-top: auto;
}
.mcat-stat-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--border-sub);
}
.mcat-stat-item:last-child { border-right: none; }
.mcat-stat-item dt {
  font-family: var(--ff-ui);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.18rem;
}
.mcat-stat-item dd {
  font-family: var(--ff-display);
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ── Sección estadísticas globales ───────────────── */
.mcat-stats-section {
  background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color));
}
.mcat-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.mcat-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.mcat-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-color, var(--purple)), transparent);
}
.mcat-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--stat-color, rgba(130, 41, 255, 0.3));
}
.mcat-stat-card__num {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.mcat-stat-card__label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ── Sección CTA final ───────────────────────────── */
/* alt, para completar la misma alternancia alt/primary/alt de index
   (mcat-stats-section=alt, mcat-section=primary, esta=alt). Antes usaba
   --bg/--bg-3 (tonos "primary"), rompiendo el patrón dos secciones seguidas. */
.mcat-cta-section {
  background: linear-gradient(to bottom, var(--bg-alt-start-color), var(--bg-alt-end-color));
  text-align: center;
}
.mcat-cta {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.mcat-cta__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--text);
}
.mcat-cta__desc {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* ── Responsive catálogo ─────────────────────────── */
@media (min-width: 640px) {
  .mcat-grid       { grid-template-columns: repeat(2, 1fr); }
  .mcat-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .mcat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   HERO BANNER COMPACTO — módulos.html (v2.1.0)
   Sustituye al hero--terminal con canvas y boot sequence.
   Misma técnica de borde con box-shadow inset que .mcat-chip.
   ============================================================ */

.hero--banner {
  min-height: 100svh;
  width: 100vw;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: visible;
  /* drop-shadow en el padre sigue el polígono del hijo; box-shadow:inset lo corta clip-path */
  filter:
    drop-shadow( 1px  0    0 rgba(130, 41, 255, 0.35))
    drop-shadow(-1px  0    0 rgba(130, 41, 255, 0.35))
    drop-shadow( 0    1px  0 rgba(130, 41, 255, 0.35))
    drop-shadow( 0   -1px  0 rgba(130, 41, 255, 0.35));
}

.hero-banner {
  --hero-clip: polygon(0% 0%, 100% 0%, 100% 100%, 5% 100%, 0% calc(100% - 3rem));
  clip-path: var(--hero-clip);
  background: var(--bg-2);
  padding: 5rem 1.25rem;
  padding-top: max(5rem, 4rem + 64px);
  position: relative;
  overflow: hidden;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Cuadrícula técnica — mismo patrón que body::after, superpuesta aquí porque
   el fondo opaco de .hero-banner tapa la de body (cohesión con el resto del
   sitio, donde sí se ve por debajo del contenido). Pinta por encima de los
   blobs (z-index:1, igual que .hero-banner__inner) y por debajo del texto
   gracias al orden de generación de ::before. */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 249, 55, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 249, 55, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── Fondo: gradiente animado (heros secundarios) ──────────────────
   Recreación ligera 100% CSS (sin WebGL/librería) inspirada en el
   preset "Prussian" de Neat (neat.firecms.co), con la paleta de
   Vanguard (solo morado/rosa/naranja). 5 blobs de forma orgánica
   (border-radius asimétrico, también animado) desenfocados sobre el
   fondo oscuro de .hero-banner; cada uno tiene su propia órbita en
   @keyframes para que el conjunto derive de forma asíncrona. Sin
   mix-blend-mode:screen — aclaraba demasiado el conjunto (colores
   lavados, apenas visibles) y con blend:normal los tonos se ven
   reales y el movimiento se nota mucho más. Respeta
   prefers-reduced-motion. */
.hero-gradient {
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: 0.8;
  filter: blur(65px);
  pointer-events: none;
}
.hero-gradient__blob {
  position: absolute;
  will-change: transform, border-radius;
}
/* 3 blobs con rol fijo: central (morado oscuro), inferior-centro (rosa
   oscuro), esquina superior izquierda (naranja oscuro). Menos blobs que la
   versión anterior a propósito — composición más legible y el movimiento
   de cada uno se distingue mejor sin varias formas solapándose. */
.hero-gradient__blob--1 {
  /* central, morado oscuro */
  top: 28%; left: 30%;
  width: 52%; height: 52%;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: radial-gradient(circle, var(--edgerunner-purple-800) 0%, transparent 70%);
  animation: hero-blob-drift-1 16s ease-in-out infinite alternate;
}
.hero-gradient__blob--2 {
  /* inferior-centro, rosa oscuro */
  bottom: -14%; left: 30%;
  width: 42%; height: 42%;
  border-radius: 58% 42% 39% 61% / 55% 61% 39% 45%;
  background: radial-gradient(circle, var(--cyber-pink-800) 0%, transparent 70%);
  animation: hero-blob-drift-2 19s ease-in-out infinite alternate;
  animation-delay: -6s;
}
.hero-gradient__blob--3 {
  /* esquina superior izquierda, naranja oscuro */
  top: -12%; left: -10%;
  width: 40%; height: 40%;
  border-radius: 65% 35% 46% 54% / 38% 52% 48% 62%;
  background: radial-gradient(circle, var(--amber-orange-800) 0%, transparent 70%);
  animation: hero-blob-drift-3 13s ease-in-out infinite alternate;
  animation-delay: -3s;
}
@keyframes hero-blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50%  { transform: translate(16%, 12%) scale(1.15); border-radius: 63% 37% 41% 59% / 51% 62% 38% 49%; }
  100% { transform: translate(-8%, 18%) scale(0.9); border-radius: 37% 63% 56% 44% / 63% 41% 59% 37%; }
}
@keyframes hero-blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 58% 42% 39% 61% / 55% 61% 39% 45%; }
  50%  { transform: translate(-18%, 14%) scale(0.88); border-radius: 39% 61% 58% 42% / 42% 39% 61% 58%; }
  100% { transform: translate(-10%, -16%) scale(1.12); border-radius: 61% 39% 45% 55% / 58% 45% 55% 42%; }
}
@keyframes hero-blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 65% 35% 46% 54% / 38% 52% 48% 62%; }
  50%  { transform: translate(12%, -16%) scale(1.18); border-radius: 46% 54% 65% 35% / 52% 38% 62% 48%; }
  100% { transform: translate(18%, 8%) scale(0.9); border-radius: 35% 65% 54% 46% / 62% 48% 38% 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gradient__blob { animation: none; }
}

.hero-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
}

.hero-banner__eyebrow {
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hero-banner__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.hero-banner__accent {
  color: var(--green);
  text-shadow: 0 0 24px rgba(34, 249, 55, 0.35);
  display: inline-block;
  white-space: nowrap;
}

.hero-banner__sub {
  font-family: var(--ff-ui);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Reducir el corte en mobile para que no se coma botones */
@media (max-width: 480px) {
  .hero-banner {
    --hero-clip: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%, 0% calc(100% - 1.75rem));
    padding: 4.5rem 1.25rem;
    padding-top: max(4.5rem, 3.5rem + 64px);
  }
}


/* ======================== CYBER-CARD ======================== */
/*
 * Componente de tarjeta con silueta SVG (assets en 05-Clientes/Vanguard/SVG/cards).
 * Uso selectivo para destacar contenido puntual (no sustituye a .programa-card).
 *
 * ::before = capa de sombra desplazada (mask con el SVG "-mask", silueta pura)
 * ::after  = capa de relleno            (mask con el mismo SVG "-mask")
 * .cyber-card__glyphs = detalle técnico decorativo (mask con el SVG completo, sin sombra)
 * .cyber-card__content = contenido real, con padding calculado para no invadir los recortes
 *
 * El aspect-ratio fija la proporción exacta del SVG en cualquier ancho, así el mask-image
 * nunca se estira de forma desigual (responsive sin distorsión).
 */

.cyber-card {
  --card-shape:  var(--cyber-card-shape-square);
  --card-glyphs: var(--cyber-card-glyphs-square);
  /* El lienzo de "glyphs" (marco decorativo) es más grande que el de "-mask"
     (silueta de relleno) — el sangrado es fijo en unidades, no proporcional,
     así que cada variante define su propio --card-aspect y --card-mask-size. */
  --card-aspect:    1.0001;
  --card-mask-size: 96.85% 97.73%;
  --card-bg:     rgba(11, 8, 12, 0.85);
  --card-shadow: rgba(34, 249, 55, 0.35);
  --card-glyph-color: var(--green);
  --card-glyph-opacity: 0.55;
  --card-color:  var(--text);
  --card-border: 3px;

  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  color: var(--card-color);
  /* 3D tilt on hover — fixed direction (not mouse-tracking), see
     .cyber-card:hover / .team-card:hover below */
  transition: transform 0.35s ease;
}

/* All cyber-cards tilt the same way */
.cyber-card:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg);
}

/* Team cards tilt toward each other: first right, second left */
.nosotros__team-cards .team-card:first-of-type:hover {
  transform: perspective(900px) rotateY(-8deg);
}
.nosotros__team-cards .team-card:last-of-type:hover {
  transform: perspective(900px) rotateY(8deg);
}

/* Capa de sombra / borde desplazado */
.cyber-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-shadow);
  transform: translate(var(--card-border), var(--card-border));
  -webkit-mask-image: var(--card-shape);
  mask-image: var(--card-shape);
  -webkit-mask-size: var(--card-mask-size);
  mask-size: var(--card-mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -2;
}

/* Capa de relleno */
.cyber-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-bg);
  -webkit-mask-image: var(--card-shape);
  mask-image: var(--card-shape);
  -webkit-mask-size: var(--card-mask-size);
  mask-size: var(--card-mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -1;
}

/* Greebles / detalle técnico — el SVG completo (con las marcas decorativas) como mask */
.cyber-card__glyphs {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--card-glyph-color);
  -webkit-mask-image: var(--card-glyphs);
  mask-image: var(--card-glyphs);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: var(--card-glyph-opacity);
  pointer-events: none;
  z-index: 0;
}

.cyber-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  /* padding en % siempre es relativo al ANCHO de la tarjeta (incluso arriba/abajo);
     estos valores se han medido por muestreo de píxeles sobre cada máscara para
     despejar los recortes de las esquinas en cualquier proporción. */
  padding: 8%;
}

/* ── Variantes de forma ───────────────────────────────
 * --card-aspect      = proporción del lienzo "glyphs" (el marco, define el
 *                       tamaño real de la tarjeta)
 * --card-mask-size    = tamaño de la silueta "-mask" relativo a ese lienzo
 *                       (siempre algo menor: el marco tiene sangrado extra)
 */
.cyber-card--square {
  --card-shape:  var(--cyber-card-shape-square);
  --card-glyphs: var(--cyber-card-glyphs-square);
  --card-aspect:    1.0001;
  --card-mask-size: 96.85% 97.73%;
}
.cyber-card--horizontal {
  --card-shape:  var(--cyber-card-shape-horizontal);
  --card-glyphs: var(--cyber-card-glyphs-horizontal);
  --card-aspect:    1.4692;
  --card-mask-size: 98.44% 96.85%;
}
.cyber-card--horizontal .cyber-card__content { padding: 8% 6%; }
.cyber-card--vertical {
  --card-shape:  var(--cyber-card-shape-vertical);
  --card-glyphs: var(--cyber-card-glyphs-vertical);
  --card-aspect:    0.6806;
  --card-mask-size: 96.85% 98.44%;
}
.cyber-card--vertical .cyber-card__content { padding: 12% 9%; }

/* Fuentes SVG reutilizables (definidas una vez, referenciadas por variante) */
:root {
  --cyber-card-shape-square:      url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC00YzM2NzdlNy05MjI2LTQ3MjEtYjAzOS1jZjFkMWE3NzFhY2IiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM4LjM1IDEyNDkuNSI+CiAgPGcgaWQ9InV1aWQtYzkzMTZiNDAtY2E3OC00OWUzLThiMmEtMDE5ZTRhNDY1YzJjIiBkYXRhLW5hbWU9IkNhcGEgMSI+CiAgICA8cGF0aCBkPSJNMTEyNC41MywxMjQ5LjA4bDI1LjE0LTM4LjU4aC0zNjMuNDNsLTI3LjA5LDM4LjU4aC0zMzEuODd2LTM4Ljg2SDExNy4wOGwtNS40Miw2LjctMTcuNjQsMzAuODhIMTkuOXYtMzMwLjY1bC0xOS45LTIzLjIyVjEwMi4xOEw5Ny4wOC42OWgzNzMuMjRsNTAuNjcsMjEuODcsMy43NSwzLjAyaDM4Ny4yTDk2My41NiwwaDk3LjI0Yy01LjIsNS4xLTguMzMsMTIuMTgtOC4zMywxOS44NCwwLDEyLjU4LDguNDksMjMuNjIsMjAuNjQsMjYuODNsNi4zOSwxLjY5LjA5LjM2LjY0LS4xNy42My4xNy4wOS0uMzYsNi4zOS0xLjY5YzguOS0yLjM2LDE1LjgzLTguOTEsMTguOS0xNy4xOXYxOS40Nmg4NC43M3YyMjYuODdsNDcuMjIsMjUuODF2NS4yaC4xNWMtLjgzLDIwNS41OC0xLjY1LDQxMS4xNy0yLjQ4LDYxNi43NWgtMzUuMDRsOS4wOCwxMC45djI3NS4zMWwtOS4yMywxMS4yNGMuMDgsOS41LjE2LDE4Ljk5LjI0LDI4LjQ5LTI1LjQ2LS4xNC01MC45Mi0uMjgtNzYuMzktLjQyWiIgc3R5bGU9ImZpbGw6IHJlZDsiLz4KICA8L2c+Cjwvc3ZnPg==");
  --cyber-card-glyphs-square:     url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC02OGU4ZjAwNC00MmJlLTRlYzAtYThkYy0xMGI3Yzg0OTFjZGUiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjc4LjU5IDEyNzguNDgiPgogIDxnIGlkPSJ1dWlkLTM4MjRjOWJhLTdiN2ItNDdlZS04ODVjLWQzMThiNDZiYTgyMSIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iODI2LjE2IDEyNDkuMTYgODA4LjA5IDEyNzUuNTYgODQ4Ljg0IDEyNzUuNTYgODY2LjkxIDEyNDkuMTYgODI2LjE2IDEyNDkuMTYiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI5MjQuNzQgMTI0OS4xNiA5MDYuNjcgMTI3NS41NiAxMTA3LjkxIDEyNzUuNTYgMTEyNS45OCAxMjQ5LjE2IDkyNC43NCAxMjQ5LjE2Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iODc5LjkxIDEyNDkuMTYgODYxLjg0IDEyNzUuNTYgODcwLjQ5IDEyNzUuNTYgODg4LjU2IDEyNDkuMTYgODc5LjkxIDEyNDkuMTYiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI5MDEuMTggMTI0OS4xNiA4ODMuMTEgMTI3NS41NiA4OTEuNzYgMTI3NS41NiA5MDkuODMgMTI0OS4xNiA5MDEuMTggMTI0OS4xNiIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjE1OS45OCAxMjQ5LjE2IDE0MS45MSAxMjc1LjU2IDE1MC41NiAxMjc1LjU2IDE2OC42MyAxMjQ5LjE2IDE1OS45OCAxMjQ5LjE2Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTYzLjE4IDEyNzUuNTYgMTcxLjgzIDEyNzUuNTYgMTg5LjkgMTI0OS4xNiAxODEuMjUgMTI0OS4xNiAxNjMuMTggMTI3NS41NiIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjEyNjkuNzUgMjQ3LjI2IDEyNDMuMzUgMjI5LjE5IDEyNDMuMzUgMjY5Ljk1IDEyNjkuNzUgMjg4LjAxIDEyNjkuNzUgMjQ3LjI2Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTI2OS43NSAyMC4yOSAxMjQzLjM1IDIuMjIgMTI0My4zNSAxNzEuMzYgMTI2OS43NSAxODkuNDMgMTI2OS43NSAyMC4yOSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjEyNjkuNzUgMjI1LjYxIDEyNDMuMzUgMjA3LjU0IDEyNDMuMzUgMjE2LjIgMTI2OS43NSAyMzQuMjYgMTI2OS43NSAyMjUuNjEiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMjY5Ljc1IDIwNC4zNCAxMjQzLjM1IDE4Ni4yNyAxMjQzLjM1IDE5NC45MiAxMjY5Ljc1IDIxMi45OSAxMjY5Ljc1IDIwNC4zNCIvPgogICAgICA8cGF0aCBkPSJNMTEzOS45NCw1NS42NGgzLjc2VjEzLjQzaC0zLjc2djQyLjIxWk0xMTQyLjM4LDE0Ljc1aDBzLTEuMTIsMC0xLjEyLDBoMHMxLjEyLDAsMS4xMiwwWiIvPgogICAgICA8cGF0aCBkPSJNMTE0Ni43OSw1NS42NGgzLjA1VjEzLjQzaC0zLjA1djQyLjIxWk0xMTQ4LjExLDE0Ljc1aC40MXMtLjQxLDAtLjQxLDB2MzkuNTdoMFYxNC43NVoiLz4KICAgICAgPHBhdGggZD0iTTExNTYuMzIsNTUuNjRoNi43OVYxMy40M2gtNi43OXY0Mi4yMVpNMTE2MS43OSwxNC43NWgwcy00LjE1LDAtNC4xNSwwaDBzNC4xNSwwLDQuMTUsMFoiLz4KICAgICAgPHJlY3QgeD0iMTE2NS4yNCIgeT0iMTMuNDMiIHdpZHRoPSIxLjMiIGhlaWdodD0iNDIuMjEiLz4KICAgICAgPHJlY3QgeD0iMTE3Mi43IiB5PSIxMy40MyIgd2lkdGg9IjIuNDQiIGhlaWdodD0iNDIuMjEiLz4KICAgICAgPHJlY3QgeD0iMTE3Ny41MSIgeT0iMTMuNDMiIHdpZHRoPSIyLjU4IiBoZWlnaHQ9IjQyLjIxIi8+CiAgICAgIDxyZWN0IHg9IjExOTEuMzMiIHk9IjEzLjQzIiB3aWR0aD0iMSIgaGVpZ2h0PSI0Mi4yMSIvPgogICAgICA8cGF0aCBkPSJNMTE5My42NSw1NS42NGg2LjU2VjEzLjQzaC02LjU2djQyLjIxWk0xMTk4Ljg5LDE0Ljc1aDBzLTMuOTIsMC0zLjkyLDBoMHMzLjkyLDAsMy45MiwwWiIvPgogICAgICA8cmVjdCB4PSIxMjA1LjA1IiB5PSIxMy40MyIgd2lkdGg9IjEuOTQiIGhlaWdodD0iNDIuMjEiLz4KICAgICAgPHJlY3QgeD0iMTE4Mi4yMiIgeT0iMTMuNDMiIHdpZHRoPSIxLjkyIiBoZWlnaHQ9IjQyLjIxIi8+CiAgICAgIDxyZWN0IHg9IjEyMTMuNDMiIHk9IjEzLjQzIiB3aWR0aD0iMS4yOCIgaGVpZ2h0PSI0Mi4yMSIvPgogICAgICA8cGF0aCBkPSJNMTExMC45OSwxNS40M2wtLjU5LDIuMjFjNy42NSwyLjAzLDEyLjk5LDguOTgsMTIuOTksMTYuOXMtNS4zNCwxNC44Ny0xMi45OCwxNi44OWwuNTgsMi4yMWM4LjY0LTIuMjksMTQuNjgtMTAuMTQsMTQuNjgtMTkuMXMtNi4wNC0xNi44MS0xNC42OC0xOS4xMVoiLz4KICAgICAgPHBhdGggZD0iTTEwODguNDUsMzQuNTRjMC03LjkyLDUuMzQtMTQuODcsMTIuOTgtMTYuOWwtLjU5LTIuMjFjLTguNjQsMi4yOS0xNC42OCwxMC4xNS0xNC42OCwxOS4xMXM2LjA0LDE2LjgxLDE0LjY5LDE5LjFsLjU4LTIuMjFjLTcuNjQtMi4wMi0xMi45OC04Ljk3LTEyLjk4LTE2Ljg5WiIvPgogICAgICA8cmVjdCB4PSIxMTA3LjA2IiB5PSIzMy40IiB3aWR0aD0iOS45IiBoZWlnaHQ9IjIuMjgiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMTA3LjA2IDMzLjQgMTEwNy4wNiAzMy40IDExMDcuMDYgMjMuNSAxMTA0Ljc4IDIzLjUgMTEwNC43OCAzMy40IDExMDQuNzggMzMuNCAxMTA0Ljc4IDMzLjQgMTA5NC44OCAzMy40IDEwOTQuODggMzUuNjggMTEwNC43OCAzNS42OCAxMTA0Ljc4IDM1LjY4IDExMDQuNzggMzUuNjggMTEwNC43OCA0NS41OCAxMTA3LjA2IDQ1LjU4IDExMDcuMDYgMzUuNjggMTEwNy4wNiAzNS42OCAxMTA3LjA2IDMzLjQiLz4KICAgICAgPHBhdGggZD0iTTEyNDMuNiwxMTA5LjhsOS45NiwxMS45NXYtMTUuMjZsLTkuOTYtMTEuOTR2MTUuMjVaTTEyNTEuNTYsMTExNi4yM2wtMy44MS00LjU3LDMuODEsNC41N2gwWk0xMjQ2Ljk0LDExMDEuNjdsLTEuMzQtMS42aDBzMS4zNCwxLjYsMS4zNCwxLjZaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTA4Mi41NWw5Ljk2LDExLjk0di0xNS4yNWwtOS45Ni0xMS45NXYxNS4yNlpNMTI1MS41NiwxMDc5Ljk2aDBzLTUuOTYtNy4xNC01Ljk2LTcuMTRoMHM1Ljk2LDcuMTQsNS45Niw3LjE0WiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDEwNTUuMjlsOS45NiwxMS45NXYtMTUuMjZsLTkuOTYtMTEuOTR2MTUuMjVaTTEyNTEuNTYsMTA2MS43MmwtMi40NS0yLjk0LDIuNDUsMi45NGgwWk0xMjQ3LjU3LDEwNDcuOTJsLTEuOTctMi4zNmgwczEuOTcsMi4zNiwxLjk3LDIuMzZaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTE4OC4yNGw5Ljk2LjAyLTkuOTYtMTEuOTV2MTEuOTNaTTEyNDkuMjgsMTE4Ni4yNWgtLjcxcy43LDAsLjcsMGgwWk0xMjQ3LjY5LDExODQuMzNsLTIuMDktMi41aDBzMi4wOSwyLjUsMi4wOSwyLjVaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTE2NC4zMWw5Ljk2LDExLjk1di0xNS4yNmwtOS45Ni0xMS45NHYxNS4yNVpNMTI1MS41NiwxMTcwLjc0aDBzLTUuMTctNi4xOS01LjE3LTYuMTlsNS4xNyw2LjE5WiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDExMzcuMDZsOS45NiwxMS45NHYtMTUuMjVsLTkuOTYtMTEuOTV2MTUuMjZaTTEyNTEuMjgsMTEzNC4xM2wtNS42OC02LjhoMHM1LjY4LDYuOCw1LjY4LDYuOFoiLz4KICAgICAgPHBhdGggZD0iTTEyNDMuNiwxMDAwLjc4bDkuOTYsMTEuOTV2LTE1LjI2bC05Ljk2LTExLjk0djE1LjI1Wk0xMjUxLjU2LDEwMDcuMjFsLTEuMTQtMS4zNywxLjE0LDEuMzdoMFpNMTI0OC41Niw5OTQuNjFsLTIuOTYtMy41NWgwczIuOTYsMy41NSwyLjk2LDMuNTVaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsOTczLjUzbDkuOTYsMTEuOTR2LTE1LjI1bC05Ljk2LTExLjk1djE1LjI2Wk0xMjUxLjU2LDk3OS45NmwtMi4yOC0yLjc0LDIuMjgsMi43M2gwWk0xMjUxLjU2LDk3MC45NGgwcy01Ljk2LTcuMTQtNS45Ni03LjE0aDBzNS45Niw3LjE0LDUuOTYsNy4xNFoiLz4KICAgICAgPHBhdGggZD0iTTEyNTMuNTYsOTU4LjIydi0xMS45NWgtOS45Nmw5Ljk2LDExLjk1Wk0xMjUxLjE0LDk1Mi4ybC40Mi41aDBzLS40Mi0uNS0uNDItLjVaTTEyNTEuNTYsOTQ4LjI3aDBzLTMuNjksMC0zLjY5LDBoMHMzLjY5LDAsMy42OSwwWiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDEwMjguMDRsOS45NiwxMS45NHYtMTUuMjVsLTkuOTYtMTEuOTV2MTUuMjZaTTEyNTEuNTYsMTAyNS40NWgwcy01Ljk2LTcuMTQtNS45Ni03LjE0aDBzNS45Niw3LjE0LDUuOTYsNy4xNFoiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMjQzLjYgMTIyNy4zNCAxMjM0LjM3IDEyMzguNTggMTIzNC4zNyAxMjU5LjA3IDEyNTMuNTYgMTI1OS4wNyAxMjUzLjU2IDEyMDUuMTEgMTI0My42IDEyMDUuMTEgMTI0My42IDEyMjcuMzQiLz4KICAgICAgPHBhdGggZD0iTTIwNS43MywxMjUxLjYzYy0uNi4zNS0xLjA4LjgzLTEuNDMsMS40My0uMzUuNi0uNTMsMS4yNi0uNTMsMS45OXYxNGMwLC43My4xOCwxLjM5LjUzLDEuOTkuMzUuNi44MywxLjA4LDEuNDMsMS40My42LjM1LDEuMjYuNTMsMS45OS41M2gxNy44OXYtMy4yOWgtMTcuNDRjLS4zMiwwLS41OS0uMTEtLjgxLS4zMi0uMjEtLjIxLS4zMi0uNDgtLjMyLS44MXYtMTMuMDljMC0uMzIuMTEtLjU5LjMyLS44LjIxLS4yMS40OC0uMzIuODEtLjMyaDE3LjQ0di0zLjI5aC0xNy44OWMtLjczLDAtMS40LjE4LTEuOTkuNTNaIi8+CiAgICAgIDxwYXRoIGQ9Ik0yNDguNzcsMTI1MS42M2MtLjYxLS4zNi0xLjI4LS41My0yLjAxLS41M2gtMTMuOTdjLS43MywwLTEuMzkuMTgtMS45OS41My0uNi4zNS0xLjA3LjgzLTEuNDMsMS40My0uMzYuNi0uNTMsMS4yNi0uNTMsMS45OXYxNy45NWgzLjI5di03LjY3aDE1LjMxdjcuNjdoMy4zMnYtMTcuOTVjMC0uNzMtLjE4LTEuMzktLjUzLTEuOTktLjM1LS42LS44NC0xLjA3LTEuNDUtMS40M1pNMjQ3LjQ0LDEyNjIuMDVoLTE1LjMxdi02LjkxYzAtLjIuMDgtLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zNy4wNy41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3Y2LjkxWiIvPgogICAgICA8cGF0aCBkPSJNMjc0LjE1LDEyNTEuNjhjLS42MS0uMzYtMS4yOC0uNTUtMi4wMS0uNTVoLTE3LjkydjIxLjg4aDMuMjl2LTcuNzlsOC4xNC0uMDIsNi41Myw3LjgxaDMuODN2LS42MWwtNi4wOC03LjIxaDIuMjJjLjczLDAsMS40LS4xOCwyLjAxLS41NC42MS0uMzUsMS4wOS0uODMsMS40NC0xLjQzLjM2LS42LjUzLTEuMjYuNTMtMS45OXYtNi4xNWMwLS43MS0uMTgtMS4zNi0uNTMtMS45Ni0uMzUtLjYtLjgzLTEuMDgtMS40NC0xLjQ1Wk0yNzIuODEsMTI2MS4xNGMwLC4yLS4wNy4zNy0uMjEuNTItLjE0LjE0LS4zMS4yMS0uNTIuMjFoLTEzLjgyYy0uMiwwLS4zOC0uMDctLjUzLS4yMS0uMTUtLjE0LS4yMy0uMzEtLjIzLS41MnYtNS45N2MwLS4yLjA4LS4zOC4yMy0uNTMuMTUtLjE1LjMzLS4yMy41My0uMjNoMTMuODJjLjIsMCwuMzguMDguNTIuMjMuMTQuMTUuMjEuMzMuMjEuNTN2NS45N1oiLz4KICAgICAgPHBhdGggZD0iTTI5OS4zMiwxMjUxLjYzYy0uNjEtLjM2LTEuMjgtLjUzLTIuMDEtLjUzaC0xNy45MnYyMS45MWgxNy45MmMuNzMsMCwxLjQtLjE4LDIuMDEtLjUzLjYxLS4zNSwxLjA5LS44MywxLjQ1LTEuNDMuMzUtLjYuNTMtMS4yNi41My0xLjk5di0xNGMwLS43My0uMTgtMS4zOS0uNTMtMS45OS0uMzUtLjYtLjg0LTEuMDctMS40NS0xLjQzWk0yOTcuOTgsMTI2OC45NmMwLC4yLS4wNy4zOC0uMjEuNTMtLjE0LjE1LS4zMS4yMy0uNTIuMjNoLTEzLjg1Yy0uMiwwLS4zOC0uMDgtLjUyLS4yMy0uMTQtLjE1LS4yMS0uMzMtLjIxLS41M3YtMTMuODJjMC0uMi4wNy0uMzguMjEtLjUzLjE0LS4xNS4zMS0uMjMuNTItLjIzaDEzLjg1Yy4yLDAsLjM3LjA3LjUyLjIzLjE0LjE1LjIxLjMzLjIxLjUzdjEzLjgyWiIvPgogICAgICA8cmVjdCB4PSIzMDQuNjUiIHk9IjEyNzMuMDQiIHdpZHRoPSIyMS45MSIgaGVpZ2h0PSIzLjI5Ii8+CiAgICAgIDxwYXRoIGQ9Ik0zMzEuODYsMTI1MS42M2MtLjYuMzUtMS4wOC44My0xLjQzLDEuNDMtLjM1LjYtLjUzLDEuMjYtLjUzLDEuOTl2MTRjMCwuNzMuMTgsMS4zOS41MywxLjk5LjM1LjYuODMsMS4wOCwxLjQzLDEuNDMuNi4zNSwxLjI2LjUzLDEuOTkuNTNoMTcuODl2LTMuMjloLTE3LjQ0Yy0uMzIsMC0uNTktLjExLS44MS0uMzItLjIxLS4yMS0uMzItLjQ4LS4zMi0uODF2LTEzLjA5YzAtLjMyLjExLS41OS4zMi0uOC4yMS0uMjEuNDgtLjMyLjgxLS4zMmgxNy40NHYtMy4yOWgtMTcuODljLS43MywwLTEuNC4xOC0xLjk5LjUzWiIvPgogICAgICA8cGF0aCBkPSJNMzc0LjgsMTI1MS42M2MtLjYtLjM2LTEuMjYtLjUzLTEuOTktLjUzaC0xNGMtLjczLDAtMS4zOS4xOC0xLjk5LjUzLS42LjM1LTEuMDcuODMtMS40MywxLjQzLS4zNi42LS41MywxLjI2LS41MywxLjk5djE0YzAsLjczLjE4LDEuMzkuNTMsMS45OS4zNS42LjgzLDEuMDgsMS40MywxLjQzLjYuMzUsMS4yNi41MywxLjk5LjUzaDE0Yy43MywwLDEuNC0uMTgsMS45OS0uNTMuNi0uMzUsMS4wNy0uODMsMS40My0xLjQzLjM1LS42LjUzLTEuMjYuNTMtMS45OXYtMTRjMC0uNzMtLjE4LTEuMzktLjUzLTEuOTktLjM2LS42LS44My0xLjA3LTEuNDMtMS40M1pNMzczLjQ1LDEyNjguOTZjMCwuMi0uMDcuMzgtLjIxLjUzLS4xNC4xNS0uMzIuMjMtLjUyLjIzaC0xMy44MmMtLjIsMC0uMzgtLjA4LS41My0uMjMtLjE1LS4xNS0uMjMtLjMzLS4yMy0uNTN2LTEzLjgyYzAtLjIuMDctLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zNy4wNy41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3YxMy44MloiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzOTIuNTMgMTI2MS4yIDM4NC4wMyAxMjUxLjEgMzgwLjExIDEyNTEuMSAzODAuMTEgMTI3My4wMSAzODMuNCAxMjczLjAxIDM4My40IDEyNTUuNTEgMzkyLjUzIDEyNjYuMzQgNDAxLjYyIDEyNTUuNTEgNDAxLjYyIDEyNzMuMDEgNDA0Ljk0IDEyNzMuMDEgNDA0Ljk0IDEyNTEuMSA0MDAuOTkgMTI1MS4xIDM5Mi41MyAxMjYxLjIiLz4KICAgICAgPHBhdGggZD0iTTQyOC4yOCwxMjUxLjY4Yy0uNjEtLjM2LTEuMjgtLjU1LTIuMDEtLjU1aC0xNy45MnYyMS44OGgzLjI5di03Ljc5bDE0LjY0LS4wM2MuNzMsMCwxLjQtLjE4LDIuMDEtLjUzLjYxLS4zNSwxLjA5LS44MywxLjQ0LTEuNDMuMzYtLjYuNTMtMS4yNi41My0xLjk5di02LjE1YzAtLjcxLS4xOC0xLjM2LS41My0xLjk2LS4zNS0uNi0uODMtMS4wOC0xLjQ0LTEuNDVaTTQyNi45NCwxMjYxLjE0YzAsLjItLjA3LjM3LS4yMS41Mi0uMTQuMTQtLjMxLjIxLS41Mi4yMWgtMTMuODJjLS4yLDAtLjM4LS4wNy0uNTMtLjIxLS4xNS0uMTQtLjIzLS4zMS0uMjMtLjUydi01Ljk3YzAtLjIuMDgtLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zOC4wOC41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3Y1Ljk3WiIvPgogICAgICA8cGF0aCBkPSJNMTIzMS4zNywyODEuODFWMEg0OTMuMDJ2LjY5SDExNi40OEwxNy42OSwxMDMuOTgsMCwxMjIuNDd2MTE1NC43M2gxMjcuNTZsMjIuMjMtMzcuNThoMjg4LjQ4djM4Ljg2aDM1NC4yMWwyNy4wOS0zOC41OGgzMjguNjdsLTI1LjE0LDM4LjU4aDE1NS40OVYzMDcuNjJsLTQ3LjIyLTI1LjgxWk0xMjcyLjA0LDEyNzEuNzhoLTEzNi41OGwyNS4xNC0zOC41OGgtMzQ0LjUxbC0yNy4wOSwzOC41OGgtMzQ0LjAzdi0zOC44NkgxNDYuNTlsLTIuNjEsMy4yMy0xOS42MiwzNC4zNUgzNy41OXYtMzM1LjY5bC0xOS45LTIzLjIyVjExMy42N0wxMTkuMzUsNy4zOWgzNzguMzFsNTMuMTgsMjIuOTYsMi40LDEuOTNoMzgyLjUxbDUxLjYzLTI1LjU4aDIzNy4yOXYyNzkuMDdsNDcuMjIsMjUuODF2MS45NGguMTV2OTU4LjI2WiIvPgogICAgICA8cGF0aCBkPSJNNS43OCw1Mi40MWwxMS45My03Ljg0aDUuNzNsMTEuOTMsNy44NGMxLjg4LS4zOSwyLjk0LS42MSw0LjgyLTFsLjk2LTEuNDVjLS4zOS0xLjg4LS42MS0yLjk0LTEtNC44MmwtMTIuODgtOC40NmMtLjgzLTEuNTUtMS41Mi0yLjgyLTIuMzUtNC4zNnYtMTQuNDVjLTEuMzYtMS4zNi0yLjEyLTIuMTItMy40OC0zLjQ4aC0xLjc0Yy0xLjM2LDEuMzYtMi4xMiwyLjEyLTMuNDgsMy40OHYxNC40NWMtLjgzLDEuNTUtMS41MiwyLjgyLTIuMzUsNC4zNkwxLDQ1LjE0Yy0uMzksMS44OC0uNjEsMi45NC0xLDQuODJsLjk2LDEuNDVjMS44OC4zOSwyLjk0LjYxLDQuODIsMVoiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  --cyber-card-shape-horizontal:  url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC1hYzg0NDc1YS04NjE2LTQ1MjUtYjMxMi0yZmRkYmZhYmU0MzUiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQ5LjA4IDEyMzguMzUiPgogIDxnIGlkPSJ1dWlkLWJkZGUwYmQ4LWM1MjUtNDQ3Zi1iODZmLTM2ZDM4MTI4NTRlZSIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPHBhdGggZD0iTTE1NDIuMjYsMTIzOC4yaDUuMmwyNS44MS00Ny4yMmgyMjYuODd2LTg0LjczaDE5LjQ1Yy04LjI3LTMuMDctMTQuODMtMTAtMTcuMTgtMTguOWwtMS43LTYuMzl2LTEuNDZsMS43LTYuMzljMy4yMS0xMi4xNSwxNC4yNS0yMC42NCwyNi44My0yMC42NCw3LjY2LDAsMTQuNzQsMy4xNCwxOS44NCw4LjMzdi05Ny4yNGwtMjUuNTgtNTEuNjN2LTM4Ny4ybDMuMDItMy43NSwyMS44Ny01MC42NlY5Ny4wOEwxNzQ2LjksMEgzNTUuMTVsLTIzLjIyLDE5LjlIMS4yOHY3NC4xM2wzMC44OCwxNy42Myw2LjcsNS40MnYzMTAuMkgwdjMzMS44N2wzOC41OCwyNy4wOXYzNjMuNDNsLTM4LjU4LTI1LjE0djc2LjE1aDI4LjA2bDExLjI0LDkuMjNoMjc1LjMxbDEwLjktOS4wOHYzNy41MmgxMjE2Ljc1di0uMTVaIiBzdHlsZT0iZmlsbDogcmVkOyIvPgogIDwvZz4KPC9zdmc+");
  --cyber-card-glyphs-horizontal: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC01MGI3Y2U5NC03ZmNlLTRlNDItOTg1OC1mYWQwZTNhZjZmMjgiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODc4LjQ4IDEyNzguNTkiPgogIDxnIGlkPSJ1dWlkLWJlNzg3YzgwLWRmNzEtNGQ1MC05MjBlLTE5NGI0YzkyZjkzNiIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjkuMzEgODI2LjE2IDIuOTIgODA4LjA5IDIuOTIgODQ4Ljg0IDI5LjMxIDg2Ni45MSAyOS4zMSA4MjYuMTYiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyOS4zMSA5MjQuNzQgMi45MiA5MDYuNjggMi45MiAxMTA3LjkxIDI5LjMxIDExMjUuOTggMjkuMzEgOTI0Ljc0Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjkuMzEgODc5LjkxIDIuOTIgODYxLjg0IDIuOTIgODcwLjUgMjkuMzEgODg4LjU2IDI5LjMxIDg3OS45MSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjI5LjMxIDkwMS4xOCAyLjkyIDg4My4xMSAyLjkyIDg5MS43NyAyOS4zMSA5MDkuODMgMjkuMzEgOTAxLjE4Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjkuMzEgMTU5Ljk4IDIuOTIgMTQxLjkxIDIuOTIgMTUwLjU3IDI5LjMxIDE2OC42MyAyOS4zMSAxNTkuOTgiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIyLjkyIDE2My4xOCAyLjkyIDE3MS44NCAyOS4zMSAxODkuOSAyOS4zMSAxODEuMjUgMi45MiAxNjMuMTgiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxNjMxLjIyIDEyNjkuNzUgMTY0OS4yOCAxMjQzLjM1IDE2MDguNTMgMTI0My4zNSAxNTkwLjQ3IDEyNjkuNzUgMTYzMS4yMiAxMjY5Ljc1Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTg1OC4xOSAxMjY5Ljc1IDE4NzYuMjYgMTI0My4zNSAxNzA3LjEyIDEyNDMuMzUgMTY4OS4wNSAxMjY5Ljc1IDE4NTguMTkgMTI2OS43NSIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjE2NTIuODcgMTI2OS43NSAxNjcwLjk0IDEyNDMuMzUgMTY2Mi4yOCAxMjQzLjM1IDE2NDQuMjIgMTI2OS43NSAxNjUyLjg3IDEyNjkuNzUiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxNjc0LjE0IDEyNjkuNzUgMTY5Mi4yMSAxMjQzLjM1IDE2ODMuNTUgMTI0My4zNSAxNjY1LjQ5IDEyNjkuNzUgMTY3NC4xNCAxMjY5Ljc1Ii8+CiAgICAgIDxwYXRoIGQ9Ik0xODIyLjg0LDExMzkuOTR2My43Nmg0Mi4yMXYtMy43NmgtNDIuMjFaTTE4NjMuNzMsMTE0MS4yNnYxLjEyaDB2LTEuMTJoLTM5LjU3LDM5LjU3WiIvPgogICAgICA8cGF0aCBkPSJNMTgyMi44NCwxMTQ2Ljc5djMuMDVoNDIuMjF2LTMuMDVoLTQyLjIxWk0xODYzLjczLDExNDguMTF2LjQxaDB2LS40aC0zOS41N3MzOS41NywwLDM5LjU3LDBaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xODIyLjg0LDExNTYuMzJ2Ni43OWg0Mi4yMXYtNi43OWgtNDIuMjFaTTE4NjMuNzMsMTE1Ny42NHY0LjE1aDB2LTQuMTVoLTM5LjU3czM5LjU3LDAsMzkuNTcsMFoiLz4KICAgICAgPHJlY3QgeD0iMTgyMi44NCIgeT0iMTE2NS4yNCIgd2lkdGg9IjQyLjIxIiBoZWlnaHQ9IjEuMyIvPgogICAgICA8cmVjdCB4PSIxODIyLjg0IiB5PSIxMTcyLjciIHdpZHRoPSI0Mi4yMSIgaGVpZ2h0PSIyLjQ0Ii8+CiAgICAgIDxyZWN0IHg9IjE4MjIuODQiIHk9IjExNzcuNTEiIHdpZHRoPSI0Mi4yMSIgaGVpZ2h0PSIyLjU4Ii8+CiAgICAgIDxyZWN0IHg9IjE4MjIuODQiIHk9IjExOTEuMzMiIHdpZHRoPSI0Mi4yMSIgaGVpZ2h0PSIxIi8+CiAgICAgIDxwYXRoIGQ9Ik0xODIyLjg0LDExOTMuNjV2Ni41Nmg0Mi4yMXYtNi41NmgtNDIuMjFaTTE4NjMuNzMsMTE5OC44OWgwdi0zLjkyaDB2My45MloiLz4KICAgICAgPHJlY3QgeD0iMTgyMi44NCIgeT0iMTIwNS4wNSIgd2lkdGg9IjQyLjIxIiBoZWlnaHQ9IjEuOTQiLz4KICAgICAgPHJlY3QgeD0iMTgyMi44NCIgeT0iMTE4Mi4yMiIgd2lkdGg9IjQyLjIxIiBoZWlnaHQ9IjEuOTIiLz4KICAgICAgPHJlY3QgeD0iMTgyMi44NCIgeT0iMTIxMy40MyIgd2lkdGg9IjQyLjIxIiBoZWlnaHQ9IjEuMjgiLz4KICAgICAgPHBhdGggZD0iTTE4NjMuMDUsMTExMC45OWwtMi4yMS0uNTljLTIuMDMsNy42NS04Ljk4LDEyLjk5LTE2LjksMTIuOTlzLTE0Ljg3LTUuMzQtMTYuODktMTIuOThsLTIuMjEuNThjMi4yOSw4LjY0LDEwLjE0LDE0LjY4LDE5LjEsMTQuNjhzMTYuODEtNi4wNCwxOS4xMS0xNC42OFoiLz4KICAgICAgPHBhdGggZD0iTTE4NDMuOTQsMTA4OC40NWM3LjkyLDAsMTQuODcsNS4zNCwxNi45LDEyLjk4bDIuMjEtLjU5Yy0yLjI5LTguNjQtMTAuMTUtMTQuNjgtMTkuMTEtMTQuNjhzLTE2LjgxLDYuMDQtMTkuMSwxNC42OWwyLjIxLjU4YzIuMDItNy42NCw4Ljk3LTEyLjk4LDE2Ljg5LTEyLjk4WiIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjE4NDIuOCAxMTA3LjA2IDE4NDIuOCAxMTE2Ljk2IDE4NDUuMDggMTExNi45NiAxODQ1LjA4IDExMDcuMDYgMTg0NS4wOCAxMTA3LjA2IDE4NDUuMDggMTEwNy4wNiAxODU0Ljk4IDExMDcuMDYgMTg1NC45OCAxMTA0Ljc4IDE4NDUuMDggMTEwNC43OCAxODQ1LjA4IDExMDQuNzggMTg0NS4wOCAxMTA0Ljc4IDE4NDUuMDggMTA5NC44OCAxODQyLjggMTA5NC44OCAxODQyLjggMTEwNC43OCAxODQyLjggMTEwNC43OCAxODQyLjggMTEwNC43OCAxODMyLjkgMTEwNC43OCAxODMyLjkgMTEwNy4wNiAxODQyLjggMTEwNy4wNiAxODQyLjggMTEwNy4wNiAxODQyLjggMTEwNy4wNiIvPgogICAgICA8cGF0aCBkPSJNMTY4LjY4LDEyNDMuNmwtMTEuOTUsOS45NmgxNS4yNmwxMS45NC05Ljk2aC0xNS4yNVpNMTY5LjQsMTI0NS42aDBsLTcuMTQsNS45NmgwbDcuMTUtNS45NloiLz4KICAgICAgPHBhdGggZD0iTTE5NS45MywxMjQzLjZsLTExLjk0LDkuOTZoMTUuMjVsMTEuOTUtOS45NmgtMTUuMjZaTTE4OS41MSwxMjUxLjU2bDEuMzUtMS4xMi0xLjM1LDEuMTJoMFpNMjAwLjg1LDEyNDkuNjJsNC44Mi00LjAyaDBsLTQuODIsNC4wMloiLz4KICAgICAgPHBhdGggZD0iTTIyMy4xOSwxMjQzLjZsLTExLjk1LDkuOTZoMTUuMjZsMTEuOTQtOS45NmgtMTUuMjVaTTIxNi43NiwxMjUxLjU2aDBsNi4zMy01LjI3LTYuMzIsNS4yN1oiLz4KICAgICAgPHBhdGggZD0iTTkwLjI0LDEyNDMuNmwtLjAyLDkuOTYsMTEuOTUtOS45NmgtMTEuOTNaTTk1LjQ1LDEyNDYuNmwxLjE5LTFoMGwtMS4yLDFaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMTQuMTcsMTI0My42bC0xMS45NSw5Ljk2aDE1LjI2bDExLjk0LTkuOTZoLTE1LjI1Wk0xMTQuODksMTI0NS42aDBsLTcuMTQsNS45NmgwbDcuMTUtNS45NloiLz4KICAgICAgPHBhdGggZD0iTTE0MS40MiwxMjQzLjZsLTExLjk0LDkuOTZoMTUuMjVsMTEuOTUtOS45NmgtMTUuMjZaTTEzNSwxMjUxLjU2bDEuNjYtMS4zOC0xLjY2LDEuMzhoMFpNMTQ3Ljg1LDEyNDguMzZsMy4zMS0yLjc2aDBsLTMuMzEsMi43NloiLz4KICAgICAgPHBhdGggZD0iTTI3Ny43LDEyNDMuNmwtMTEuOTUsOS45NmgxNS4yNmwxMS45NC05Ljk2aC0xNS4yNVpNMjcxLjI3LDEyNTEuNTZsNC44NS00LjA0LTQuODUsNC4wNGgwWk0yODcuMzgsMTI0NS42NGwuMDUtLjA0aDBsLS4wNS4wNFoiLz4KICAgICAgPHBhdGggZD0iTTMwNC45NSwxMjQzLjZsLTExLjk0LDkuOTZoMTUuMjVsMTEuOTUtOS45NmgtMTUuMjZaTTMwNS42NywxMjQ1LjZoMGwtNy4xNCw1Ljk2aDBsNy4xNS01Ljk2WiIvPgogICAgICA8cGF0aCBkPSJNMzIwLjI2LDEyNTMuNTZoMTEuOTV2LTkuOTZsLTExLjk1LDkuOTZaTTMyNS43OCwxMjUxLjU2bDEuNzItMS40My0xLjcyLDEuNDNoMFpNMzMwLjIxLDEyNTEuNTZoMHYtMy42OWgwczAsMCwwLDBoLjAxdjMuNjlaIi8+CiAgICAgIDxwYXRoIGQ9Ik0yNTAuNDQsMTI0My42bC0xMS45NCw5Ljk2aDE1LjI1bDExLjk1LTkuOTZoLTE1LjI2Wk0yNTEuMTYsMTI0NS42bC02Ljg4LDUuNzQsNi44OC01Ljc0aDBaTTI1My43LDEyNTFsNi40OC01LjRoMGwtNi40OCw1LjRaIi8+CiAgICAgIDxwYXRoIGQ9Ik01MS4xNCwxMjQzLjZsLTExLjI0LTkuMjNoLTIwLjQ5djE5LjE5aDUzLjk2di05Ljk2aC0yMi4yM1pNMzkuMTksMTIzNi4zN2wxMS4yNCw5LjIzaDBsLTExLjI0LTkuMjNoMFoiLz4KICAgICAgPHBhdGggZD0iTTI2Ljg1LDIwNS43NGMtLjM1LS42LS44My0xLjA4LTEuNDMtMS40My0uNi0uMzUtMS4yNi0uNTMtMS45OS0uNTNoLTE0Yy0uNzMsMC0xLjM5LjE4LTEuOTkuNTMtLjYuMzUtMS4wOC44My0xLjQzLDEuNDMtLjM1LjYtLjUzLDEuMjYtLjUzLDEuOTl2MTcuODloMy4yOXYtMTcuNDRjMC0uMzIuMTEtLjU5LjMyLS44MS4yMS0uMjEuNDgtLjMyLjgxLS4zMmgxMy4wOWMuMzIsMCwuNTkuMTEuOC4zMi4yMS4yMS4zMi40OC4zMi44MXYxNy40NGgzLjI5di0xNy44OWMwLS43My0uMTgtMS40LS41My0xLjk5WiIvPgogICAgICA8cGF0aCBkPSJNMjYuODUsMjQ4Ljc4Yy4zNi0uNjEuNTMtMS4yOC41My0yLjAxdi0xMy45N2MwLS43My0uMTgtMS4zOS0uNTMtMS45OS0uMzUtLjYtLjgzLTEuMDctMS40My0xLjQzLS42LS4zNi0xLjI2LS41My0xLjk5LS41M0g1LjQ3djMuMjloNy42N3YxNS4zMWgtNy42N3YzLjMyaDE3Ljk1Yy43MywwLDEuMzktLjE4LDEuOTktLjUzLjYtLjM1LDEuMDctLjg0LDEuNDMtMS40NVpNMTYuNDMsMjQ3LjQ0di0xNS4zMWg2LjkxYy4yLDAsLjM4LjA4LjUzLjIzLjE1LjE1LjIzLjMzLjIzLjUzdjEzLjgyYzAsLjItLjA3LjM3LS4yMy41Mi0uMTUuMTQtLjMzLjIxLS41My4yMWgtNi45MVoiLz4KICAgICAgPHBhdGggZD0iTTI2LjgsMjc0LjE2Yy4zNi0uNjEuNTUtMS4yOC41NS0yLjAxdi0xNy45Mkg1LjQ3djMuMjloNy43OWwuMDIsOC4xNC03LjgxLDYuNTN2My44M2guNjFsNy4yMS02LjA4djIuMjJjMCwuNzMuMTgsMS40LjU0LDIuMDEuMzUuNjEuODMsMS4wOSwxLjQzLDEuNDQuNi4zNiwxLjI2LjUzLDEuOTkuNTNoNi4xNWMuNzEsMCwxLjM2LS4xOCwxLjk2LS41My42LS4zNSwxLjA4LS44MywxLjQ1LTEuNDRaTTE3LjM0LDI3Mi44MmMtLjIsMC0uMzctLjA3LS41Mi0uMjEtLjE0LS4xNC0uMjEtLjMxLS4yMS0uNTJ2LTEzLjgyYzAtLjIuMDctLjM4LjIxLS41My4xNC0uMTUuMzEtLjIzLjUyLS4yM2g1Ljk3Yy4yLDAsLjM4LjA4LjUzLjIzLjE1LjE1LjIzLjMzLjIzLjUzdjEzLjgyYzAsLjItLjA4LjM4LS4yMy41Mi0uMTUuMTQtLjMzLjIxLS41My4yMWgtNS45N1oiLz4KICAgICAgPHBhdGggZD0iTTI2Ljg1LDI5OS4zMmMuMzYtLjYxLjUzLTEuMjguNTMtMi4wMXYtMTcuOTJINS40N3YxNy45MmMwLC43My4xOCwxLjQuNTMsMi4wMS4zNS42MS44MywxLjA5LDEuNDMsMS40NS42LjM1LDEuMjYuNTMsMS45OS41M2gxNGMuNzMsMCwxLjM5LS4xOCwxLjk5LS41My42LS4zNSwxLjA3LS44NCwxLjQzLTEuNDVaTTkuNTIsMjk3Ljk4Yy0uMiwwLS4zOC0uMDctLjUzLS4yMS0uMTUtLjE0LS4yMy0uMzEtLjIzLS41MnYtMTMuODVjMC0uMi4wOC0uMzguMjMtLjUyLjE1LS4xNC4zMy0uMjEuNTMtLjIxaDEzLjgyYy4yLDAsLjM4LjA3LjUzLjIxLjE1LjE0LjIzLjMxLjIzLjUydjEzLjg1YzAsLjItLjA3LjM3LS4yMy41Mi0uMTUuMTQtLjMzLjIxLS41My4yMWgtMTMuODJaIi8+CiAgICAgIDxyZWN0IHg9IjIuMTYiIHk9IjMwNC42NSIgd2lkdGg9IjMuMjkiIGhlaWdodD0iMjEuOTEiLz4KICAgICAgPHBhdGggZD0iTTI2Ljg1LDMzMS44N2MtLjM1LS42LS44My0xLjA4LTEuNDMtMS40My0uNi0uMzUtMS4yNi0uNTMtMS45OS0uNTNoLTE0Yy0uNzMsMC0xLjM5LjE4LTEuOTkuNTMtLjYuMzUtMS4wOC44My0xLjQzLDEuNDMtLjM1LjYtLjUzLDEuMjYtLjUzLDEuOTl2MTcuODloMy4yOXYtMTcuNDRjMC0uMzIuMTEtLjU5LjMyLS44MS4yMS0uMjEuNDgtLjMyLjgxLS4zMmgxMy4wOWMuMzIsMCwuNTkuMTEuOC4zMi4yMS4yMS4zMi40OC4zMi44MXYxNy40NGgzLjI5di0xNy44OWMwLS43My0uMTgtMS40LS41My0xLjk5WiIvPgogICAgICA8cGF0aCBkPSJNMjYuODUsMzc0LjhjLjM2LS42LjUzLTEuMjYuNTMtMS45OXYtMTRjMC0uNzMtLjE4LTEuMzktLjUzLTEuOTktLjM1LS42LS44My0xLjA3LTEuNDMtMS40My0uNi0uMzYtMS4yNi0uNTMtMS45OS0uNTNoLTE0Yy0uNzMsMC0xLjM5LjE4LTEuOTkuNTMtLjYuMzUtMS4wOC44My0xLjQzLDEuNDMtLjM1LjYtLjUzLDEuMjYtLjUzLDEuOTl2MTRjMCwuNzMuMTgsMS40LjUzLDEuOTkuMzUuNi44MywxLjA3LDEuNDMsMS40My42LjM1LDEuMjYuNTMsMS45OS41M2gxNGMuNzMsMCwxLjM5LS4xOCwxLjk5LS41My42LS4zNiwxLjA3LS44MywxLjQzLTEuNDNaTTkuNTIsMzczLjQ1Yy0uMiwwLS4zOC0uMDctLjUzLS4yMS0uMTUtLjE0LS4yMy0uMzItLjIzLS41MnYtMTMuODJjMC0uMi4wOC0uMzguMjMtLjUzLjE1LS4xNS4zMy0uMjMuNTMtLjIzaDEzLjgyYy4yLDAsLjM4LjA3LjUzLjIzLjE1LjE1LjIzLjMzLjIzLjUzdjEzLjgyYzAsLjItLjA3LjM3LS4yMy41Mi0uMTUuMTQtLjMzLjIxLS41My4yMWgtMTMuODJaIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTcuMjggMzkyLjUzIDI3LjM4IDM4NC4wNCAyNy4zOCAzODAuMTEgNS40NyAzODAuMTEgNS40NyAzODMuNCAyMi45NyAzODMuNCAxMi4xNCAzOTIuNTMgMjIuOTcgNDAxLjYzIDUuNDcgNDAxLjYzIDUuNDcgNDA0Ljk0IDI3LjM4IDQwNC45NCAyNy4zOCA0MDAuOTkgMTcuMjggMzkyLjUzIi8+CiAgICAgIDxwYXRoIGQ9Ik0yNi44LDQyOC4yOWMuMzYtLjYxLjU1LTEuMjguNTUtMi4wMXYtMTcuOTJINS40N3YzLjI5aDcuNzlsLjAzLDE0LjY0YzAsLjczLjE4LDEuNC41MywyLjAxLjM1LjYxLjgzLDEuMDksMS40MywxLjQ0LjYuMzYsMS4yNi41MywxLjk5LjUzaDYuMTVjLjcxLDAsMS4zNi0uMTgsMS45Ni0uNTMuNi0uMzUsMS4wOC0uODMsMS40NS0xLjQ0Wk0xNy4zNCw0MjYuOTVjLS4yLDAtLjM3LS4wNy0uNTItLjIxLS4xNC0uMTQtLjIxLS4zMS0uMjEtLjUydi0xMy44MmMwLS4yLjA3LS4zOC4yMS0uNTMuMTQtLjE1LjMxLS4yMy41Mi0uMjNoNS45N2MuMiwwLC4zOC4wOC41My4yMy4xNS4xNS4yMy4zMy4yMy41M3YxMy44MmMwLC4yLS4wOC4zOC0uMjMuNTItLjE1LjE0LS4zMy4yMS0uNTMuMjFoLTUuOTdaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xNTk2LjY3LDEyMzEuMzdoMjgxLjgxVjQ5My4wMmgtLjY5VjExNi40OGwtMTAzLjI5LTk4Ljc5LTE4LjQ5LTE3LjY5SDEuMjh2MTI3LjU2bDM3LjU4LDIyLjIzdjI4OC40OEgwdjM1NC4yMWwzOC41OCwyNy4wOXYzMjguNjdsLTM4LjU4LTI1LjE0djE1NS40OWgxNTcwLjg2bDI1LjgxLTQ3LjIyWk02LjcsMTI3Mi4wNHYtMTM2LjU4bDM4LjU4LDI1LjE0di0zNDQuNTFsLTM4LjU4LTI3LjA5di0zNDQuMDNoMzguODZWMTQ2LjU5bC0zLjIzLTIuNjFMNy45OCwxMjQuMzZWMzcuNTloMzM1LjY5bDIzLjIyLTE5LjloMTM5Ny45MmwxMDYuMjgsMTAxLjY2djM3OC4zMWwtMjIuOTYsNTMuMTgtMS45MywyLjR2MzgyLjUxbDI1LjU4LDUxLjYzdjIzNy4yOWgtMjc5LjA3bC0yNS44MSw0Ny4yMmgtMS45NHYuMTVINi43WiIvPgogICAgICA8cGF0aCBkPSJNMTgyNi4wNyw1Ljc4bDcuODQsMTEuOTR2NS43M2wtNy44NCwxMS45M2MuMzksMS44OC42MSwyLjk0LDEsNC44MmwxLjQ1Ljk2YzEuODgtLjM5LDIuOTQtLjYxLDQuODItMWw4LjQ2LTEyLjg4YzEuNTUtLjgzLDIuODItMS41Miw0LjM2LTIuMzVoMTQuNDVjMS4zNi0xLjM2LDIuMTItMi4xMiwzLjQ4LTMuNDh2LTEuNzRjLTEuMzYtMS4zNi0yLjEyLTIuMTItMy40OC0zLjQ4aC0xNC40NWMtMS41NS0uODMtMi44Mi0xLjUyLTQuMzYtMi4zNWwtOC40Ni0xMi44OGMtMS44OC0uMzktMi45NC0uNjEtNC44Mi0xbC0xLjQ1Ljk2Yy0uMzksMS44OC0uNjEsMi45NC0xLDQuODJaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
  --cyber-card-shape-vertical:    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC0zYWZiODI0My1jZDM4LTRlNWQtYTJhMi1iZmE0ZTQ1ZmQ0MDIiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM4LjM1IDE4NDkuMDgiPgogIDxnIGlkPSJ1dWlkLTk4MmE2ZDQ4LTRkMmItNGNhYS1hMWU0LTE3YTM0YzcxNWE0ZCIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPHBhdGggZD0iTTEyMzguMiwzMDYuODJ2LTUuMmwtNDcuMjItMjUuODFWNDguOTRoLTg0Ljczdi0xOS40NWMtMy4wNyw4LjI3LTEwLDE0LjgzLTE4LjksMTcuMThsLTYuMzksMS43aC0xLjQ2bC02LjM5LTEuN2MtMTIuMTUtMy4yMS0yMC42NC0xNC4yNS0yMC42NC0yNi44MywwLTcuNjYsMy4xNC0xNC43NCw4LjMzLTE5Ljg0aC05Ny4yNGwtNTEuNjMsMjUuNThoLTM4Ny4ybC0zLjc1LTMuMDJMNDcwLjMyLjY5SDk3LjA4TDAsMTAyLjE4djEzOTEuNzVsMTkuOSwyMy4yMnYzMzAuNjVoNzQuMTNsMTcuNjMtMzAuODgsNS40Mi02LjdoMzEwLjJ2MzguODZoMzMxLjg3bDI3LjA5LTM4LjU4aDM2My40M2wtMjUuMTQsMzguNThoNzYuMTV2LTI4LjA2bDkuMjMtMTEuMjR2LTI3NS4zMWwtOS4wOC0xMC45aDM3LjUyVjMwNi44MmgtLjE1WiIgc3R5bGU9ImZpbGw6IHJlZDsiLz4KICA8L2c+Cjwvc3ZnPg==");
  --cyber-card-glyphs-vertical:   url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC1jODFlZmYxMS03YTA1LTQ2M2YtYmQwNC00ZTEyMDlhMjI2NTYiIGRhdGEtbmFtZT0iQ2FwYSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjc4LjU5IDE4NzguNDgiPgogIDxnIGlkPSJ1dWlkLTdmYWQ0NjVlLTZhMWUtNDE3ZC04ZTZhLTYzMjQwNjM4YTEyNyIgZGF0YS1uYW1lPSJDYXBhIDEiPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iODI2LjE2IDE4NDkuMTcgODA4LjA5IDE4NzUuNTYgODQ4Ljg0IDE4NzUuNTYgODY2LjkxIDE4NDkuMTcgODI2LjE2IDE4NDkuMTciLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI5MjQuNzQgMTg0OS4xNyA5MDYuNjggMTg3NS41NiAxMTA3LjkxIDE4NzUuNTYgMTEyNS45OCAxODQ5LjE3IDkyNC43NCAxODQ5LjE3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iODc5LjkxIDE4NDkuMTcgODYxLjg0IDE4NzUuNTYgODcwLjUgMTg3NS41NiA4ODguNTYgMTg0OS4xNyA4NzkuOTEgMTg0OS4xNyIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjkwMS4xOCAxODQ5LjE3IDg4My4xMSAxODc1LjU2IDg5MS43NyAxODc1LjU2IDkwOS44MyAxODQ5LjE3IDkwMS4xOCAxODQ5LjE3Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTU5Ljk4IDE4NDkuMTcgMTQxLjkxIDE4NzUuNTYgMTUwLjU3IDE4NzUuNTYgMTY4LjYzIDE4NDkuMTcgMTU5Ljk4IDE4NDkuMTciLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxNjMuMTggMTg3NS41NiAxNzEuODQgMTg3NS41NiAxODkuOSAxODQ5LjE3IDE4MS4yNSAxODQ5LjE3IDE2My4xOCAxODc1LjU2Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTI2OS43NSAyNDcuMjYgMTI0My4zNSAyMjkuMiAxMjQzLjM1IDI2OS45NSAxMjY5Ljc1IDI4OC4wMSAxMjY5Ljc1IDI0Ny4yNiIvPgogICAgICA8cG9seWdvbiBwb2ludHM9IjEyNjkuNzUgMjAuMjkgMTI0My4zNSAyLjIyIDEyNDMuMzUgMTcxLjM2IDEyNjkuNzUgMTg5LjQzIDEyNjkuNzUgMjAuMjkiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMjY5Ljc1IDIyNS42MSAxMjQzLjM1IDIwNy41NCAxMjQzLjM1IDIxNi4yIDEyNjkuNzUgMjM0LjI2IDEyNjkuNzUgMjI1LjYxIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTI2OS43NSAyMDQuMzQgMTI0My4zNSAxODYuMjcgMTI0My4zNSAxOTQuOTMgMTI2OS43NSAyMTIuOTkgMTI2OS43NSAyMDQuMzQiLz4KICAgICAgPHBhdGggZD0iTTExMzkuOTQsNTUuNjRoMy43NlYxMy40M2gtMy43NnY0Mi4yMVpNMTE0MS4yNiwxNC43NWgxLjEycy0xLjEyLDAtMS4xMiwwdjM5LjU3aDBWMTQuNzVaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMTQ2Ljc5LDU1LjY0aDMuMDVWMTMuNDNoLTMuMDV2NDIuMjFaTTExNDguMTEsMTQuNzVoLjQxcy0uNCwwLS40LDB2MzkuNTdoMFYxNC43NVoiLz4KICAgICAgPHBhdGggZD0iTTExNTYuMzIsNTUuNjRoNi43OVYxMy40M2gtNi43OXY0Mi4yMVpNMTE1Ny42NCwxNC43NWg0LjE1cy00LjE1LDAtNC4xNSwwdjM5LjU3aDBWMTQuNzVaIi8+CiAgICAgIDxyZWN0IHg9IjExNjUuMjQiIHk9IjEzLjQzIiB3aWR0aD0iMS4zIiBoZWlnaHQ9IjQyLjIxIi8+CiAgICAgIDxyZWN0IHg9IjExNzIuNyIgeT0iMTMuNDMiIHdpZHRoPSIyLjQ0IiBoZWlnaHQ9IjQyLjIxIi8+CiAgICAgIDxyZWN0IHg9IjExNzcuNTEiIHk9IjEzLjQzIiB3aWR0aD0iMi41OCIgaGVpZ2h0PSI0Mi4yMSIvPgogICAgICA8cmVjdCB4PSIxMTkxLjMzIiB5PSIxMy40MyIgd2lkdGg9IjEiIGhlaWdodD0iNDIuMjEiLz4KICAgICAgPHBhdGggZD0iTTExOTMuNjUsNTUuNjRoNi41NlYxMy40M2gtNi41NnY0Mi4yMVpNMTE5OC44OSwxNC43NWgwcy0zLjkyLDAtMy45MiwwaDBzMy45MiwwLDMuOTIsMFoiLz4KICAgICAgPHJlY3QgeD0iMTIwNS4wNSIgeT0iMTMuNDMiIHdpZHRoPSIxLjk0IiBoZWlnaHQ9IjQyLjIxIi8+CiAgICAgIDxyZWN0IHg9IjExODIuMjIiIHk9IjEzLjQzIiB3aWR0aD0iMS45MiIgaGVpZ2h0PSI0Mi4yMSIvPgogICAgICA8cmVjdCB4PSIxMjEzLjQzIiB5PSIxMy40MyIgd2lkdGg9IjEuMjgiIGhlaWdodD0iNDIuMjEiLz4KICAgICAgPHBhdGggZD0iTTExMTAuOTksMTUuNDNsLS41OSwyLjIxYzcuNjUsMi4wMywxMi45OSw4Ljk4LDEyLjk5LDE2LjlzLTUuMzQsMTQuODctMTIuOTgsMTYuODlsLjU4LDIuMjFjOC42NC0yLjI5LDE0LjY4LTEwLjE0LDE0LjY4LTE5LjFzLTYuMDQtMTYuODEtMTQuNjgtMTkuMTFaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMDg4LjQ1LDM0LjU0YzAtNy45Miw1LjM0LTE0Ljg3LDEyLjk4LTE2LjlsLS41OS0yLjIxYy04LjY0LDIuMjktMTQuNjgsMTAuMTUtMTQuNjgsMTkuMTFzNi4wNCwxNi44MSwxNC42OSwxOS4xbC41OC0yLjIxYy03LjY0LTIuMDItMTIuOTgtOC45Ny0xMi45OC0xNi44OVoiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMTA3LjA2IDM1LjY4IDExMTYuOTYgMzUuNjggMTExNi45NiAzMy40IDExMDcuMDYgMzMuNCAxMTA3LjA2IDMzLjQgMTEwNy4wNiAzMy40IDExMDcuMDYgMjMuNSAxMTA0Ljc4IDIzLjUgMTEwNC43OCAzMy40IDExMDQuNzggMzMuNCAxMTA0Ljc4IDMzLjQgMTA5NC44OCAzMy40IDEwOTQuODggMzUuNjggMTEwNC43OCAzNS42OCAxMTA0Ljc4IDM1LjY4IDExMDQuNzggMzUuNjggMTEwNC43OCA0NS41OCAxMTA3LjA2IDQ1LjU4IDExMDcuMDYgMzUuNjggMTEwNy4wNiAzNS42OCAxMTA3LjA2IDM1LjY4Ii8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTcwOS44bDkuOTYsMTEuOTV2LTE1LjI2bC05Ljk2LTExLjk0djE1LjI1Wk0xMjQ1LjYsMTcwOS4wOGgwczUuOTYsNy4xNCw1Ljk2LDcuMTRoMHMtNS45Ni03LjE0LTUuOTYtNy4xNFoiLz4KICAgICAgPHBhdGggZD0iTTEyNDMuNiwxNjgyLjU1bDkuOTYsMTEuOTR2LTE1LjI1bC05Ljk2LTExLjk1djE1LjI2Wk0xMjUxLjU2LDE2ODguOTdsLTEuMTItMS4zNSwxLjEyLDEuMzVoMFpNMTI0OS42MiwxNjc3LjYzbC00LjAyLTQuODJoMHM0LjAyLDQuODIsNC4wMiw0LjgyWiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDE2NTUuMjlsOS45NiwxMS45NXYtMTUuMjZsLTkuOTYtMTEuOTR2MTUuMjVaTTEyNTEuNTYsMTY2MS43Mmgwcy01LjI3LTYuMzItNS4yNy02LjMybDUuMjcsNi4zMloiLz4KICAgICAgPHBhdGggZD0iTTEyNDMuNiwxNzg4LjI0bDkuOTYuMDItOS45Ni0xMS45NXYxMS45M1pNMTI0Ni42LDE3ODMuMDNsLTEtMS4xOWgwczEsMS4xOSwxLDEuMTlaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTc2NC4zMWw5Ljk2LDExLjk1di0xNS4yNmwtOS45Ni0xMS45NHYxNS4yNVpNMTI0NS42LDE3NjMuNTloMHM1Ljk2LDcuMTQsNS45Niw3LjE0aDBzLTUuOTYtNy4xNC01Ljk2LTcuMTRaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTczNy4wNmw5Ljk2LDExLjk0di0xNS4yNWwtOS45Ni0xMS45NXYxNS4yNlpNMTI1MS41NiwxNzQzLjQ4bC0xLjM4LTEuNjYsMS4zOCwxLjY2aDBaTTEyNDguMzYsMTczMC42M2wtMi43Ni0zLjMxaDBzMi43NiwzLjMxLDIuNzYsMy4zMVoiLz4KICAgICAgPHBhdGggZD0iTTEyNDMuNiwxNjAwLjc4bDkuOTYsMTEuOTV2LTE1LjI2bC05Ljk2LTExLjk0djE1LjI1Wk0xMjUxLjU2LDE2MDcuMjFsLTQuMDQtNC44NSw0LjA0LDQuODVoMFpNMTI0NS42NCwxNTkxLjFsLS4wNC0uMDVoMHMuMDQuMDUuMDQuMDVaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjQzLjYsMTU3My41M2w5Ljk2LDExLjk0di0xNS4yNWwtOS45Ni0xMS45NXYxNS4yNlpNMTI0NS42LDE1NzIuODFoMHM1Ljk2LDcuMTQsNS45Niw3LjE0aDBzLTUuOTYtNy4xNC01Ljk2LTcuMTRaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMjUzLjU2LDE1NTguMjJ2LTExLjk1aC05Ljk2bDkuOTYsMTEuOTVaTTEyNTEuNTYsMTU1Mi43bC0xLjQzLTEuNzIsMS40MywxLjcyaDBaTTEyNTEuNTYsMTU0OC4yN2gwcy0zLjY5LDAtMy42OSwwaDBzMCwwLDAsMGgwczMuNjktLjAxLDMuNjktLjAxWiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDE2MjguMDRsOS45NiwxMS45NHYtMTUuMjVsLTkuOTYtMTEuOTV2MTUuMjZaTTEyNDUuNiwxNjI3LjMybDUuNzQsNi44OC01Ljc0LTYuODhoMFpNMTI1MSwxNjI0Ljc4bC01LjQtNi40OGgwczUuNCw2LjQ4LDUuNCw2LjQ4WiIvPgogICAgICA8cGF0aCBkPSJNMTI0My42LDE4MjcuMzRsLTkuMjMsMTEuMjR2MjAuNDloMTkuMTl2LTUzLjk2aC05Ljk2djIyLjIzWk0xMjM2LjM3LDE4MzkuMjlsOS4yMy0xMS4yNGgwcy05LjIzLDExLjI0LTkuMjMsMTEuMjRoMFoiLz4KICAgICAgPHBhdGggZD0iTTIwNS43NCwxODUxLjYzYy0uNi4zNS0xLjA4LjgzLTEuNDMsMS40My0uMzUuNi0uNTMsMS4yNi0uNTMsMS45OXYxNGMwLC43My4xOCwxLjM5LjUzLDEuOTkuMzUuNi44MywxLjA4LDEuNDMsMS40My42LjM1LDEuMjYuNTMsMS45OS41M2gxNy44OXYtMy4yOWgtMTcuNDRjLS4zMiwwLS41OS0uMTEtLjgxLS4zMi0uMjEtLjIxLS4zMi0uNDgtLjMyLS44MXYtMTMuMDljMC0uMzIuMTEtLjU5LjMyLS44LjIxLS4yMS40OC0uMzIuODEtLjMyaDE3LjQ0di0zLjI5aC0xNy44OWMtLjczLDAtMS40LjE4LTEuOTkuNTNaIi8+CiAgICAgIDxwYXRoIGQ9Ik0yNDguNzgsMTg1MS42M2MtLjYxLS4zNi0xLjI4LS41My0yLjAxLS41M2gtMTMuOTdjLS43MywwLTEuMzkuMTgtMS45OS41My0uNi4zNS0xLjA3LjgzLTEuNDMsMS40My0uMzYuNi0uNTMsMS4yNi0uNTMsMS45OXYxNy45NWgzLjI5di03LjY3aDE1LjMxdjcuNjdoMy4zMnYtMTcuOTVjMC0uNzMtLjE4LTEuMzktLjUzLTEuOTktLjM1LS42LS44NC0xLjA3LTEuNDUtMS40M1pNMjQ3LjQ0LDE4NjIuMDVoLTE1LjMxdi02LjkxYzAtLjIuMDgtLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zNy4wNy41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3Y2LjkxWiIvPgogICAgICA8cGF0aCBkPSJNMjc0LjE2LDE4NTEuNjhjLS42MS0uMzYtMS4yOC0uNTUtMi4wMS0uNTVoLTE3LjkydjIxLjg4aDMuMjl2LTcuNzlsOC4xNC0uMDIsNi41Myw3LjgxaDMuODN2LS42MWwtNi4wOC03LjIxaDIuMjJjLjczLDAsMS40LS4xOCwyLjAxLS41NC42MS0uMzUsMS4wOS0uODMsMS40NC0xLjQzLjM2LS42LjUzLTEuMjYuNTMtMS45OXYtNi4xNWMwLS43MS0uMTgtMS4zNi0uNTMtMS45Ni0uMzUtLjYtLjgzLTEuMDgtMS40NC0xLjQ1Wk0yNzIuODIsMTg2MS4xNGMwLC4yLS4wNy4zNy0uMjEuNTItLjE0LjE0LS4zMS4yMS0uNTIuMjFoLTEzLjgyYy0uMiwwLS4zOC0uMDctLjUzLS4yMS0uMTUtLjE0LS4yMy0uMzEtLjIzLS41MnYtNS45N2MwLS4yLjA4LS4zOC4yMy0uNTMuMTUtLjE1LjMzLS4yMy41My0uMjNoMTMuODJjLjIsMCwuMzguMDguNTIuMjMuMTQuMTUuMjEuMzMuMjEuNTN2NS45N1oiLz4KICAgICAgPHBhdGggZD0iTTI5OS4zMiwxODUxLjYzYy0uNjEtLjM2LTEuMjgtLjUzLTIuMDEtLjUzaC0xNy45MnYyMS45MWgxNy45MmMuNzMsMCwxLjQtLjE4LDIuMDEtLjUzLjYxLS4zNSwxLjA5LS44MywxLjQ1LTEuNDMuMzUtLjYuNTMtMS4yNi41My0xLjk5di0xNGMwLS43My0uMTgtMS4zOS0uNTMtMS45OS0uMzUtLjYtLjg0LTEuMDctMS40NS0xLjQzWk0yOTcuOTgsMTg2OC45NmMwLC4yLS4wNy4zOC0uMjEuNTMtLjE0LjE1LS4zMS4yMy0uNTIuMjNoLTEzLjg1Yy0uMiwwLS4zOC0uMDgtLjUyLS4yMy0uMTQtLjE1LS4yMS0uMzMtLjIxLS41M3YtMTMuODJjMC0uMi4wNy0uMzguMjEtLjUzLjE0LS4xNS4zMS0uMjMuNTItLjIzaDEzLjg1Yy4yLDAsLjM3LjA3LjUyLjIzLjE0LjE1LjIxLjMzLjIxLjUzdjEzLjgyWiIvPgogICAgICA8cmVjdCB4PSIzMDQuNjUiIHk9IjE4NzMuMDQiIHdpZHRoPSIyMS45MSIgaGVpZ2h0PSIzLjI5Ii8+CiAgICAgIDxwYXRoIGQ9Ik0zMzEuODcsMTg1MS42M2MtLjYuMzUtMS4wOC44My0xLjQzLDEuNDMtLjM1LjYtLjUzLDEuMjYtLjUzLDEuOTl2MTRjMCwuNzMuMTgsMS4zOS41MywxLjk5LjM1LjYuODMsMS4wOCwxLjQzLDEuNDMuNi4zNSwxLjI2LjUzLDEuOTkuNTNoMTcuODl2LTMuMjloLTE3LjQ0Yy0uMzIsMC0uNTktLjExLS44MS0uMzItLjIxLS4yMS0uMzItLjQ4LS4zMi0uODF2LTEzLjA5YzAtLjMyLjExLS41OS4zMi0uOC4yMS0uMjEuNDgtLjMyLjgxLS4zMmgxNy40NHYtMy4yOWgtMTcuODljLS43MywwLTEuNC4xOC0xLjk5LjUzWiIvPgogICAgICA8cGF0aCBkPSJNMzc0LjgsMTg1MS42M2MtLjYtLjM2LTEuMjYtLjUzLTEuOTktLjUzaC0xNGMtLjczLDAtMS4zOS4xOC0xLjk5LjUzLS42LjM1LTEuMDcuODMtMS40MywxLjQzLS4zNi42LS41MywxLjI2LS41MywxLjk5djE0YzAsLjczLjE4LDEuMzkuNTMsMS45OS4zNS42LjgzLDEuMDgsMS40MywxLjQzLjYuMzUsMS4yNi41MywxLjk5LjUzaDE0Yy43MywwLDEuNC0uMTgsMS45OS0uNTMuNi0uMzUsMS4wNy0uODMsMS40My0xLjQzLjM1LS42LjUzLTEuMjYuNTMtMS45OXYtMTRjMC0uNzMtLjE4LTEuMzktLjUzLTEuOTktLjM2LS42LS44My0xLjA3LTEuNDMtMS40M1pNMzczLjQ1LDE4NjguOTZjMCwuMi0uMDcuMzgtLjIxLjUzLS4xNC4xNS0uMzIuMjMtLjUyLjIzaC0xMy44MmMtLjIsMC0uMzgtLjA4LS41My0uMjMtLjE1LS4xNS0uMjMtLjMzLS4yMy0uNTN2LTEzLjgyYzAtLjIuMDctLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zNy4wNy41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3YxMy44MloiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSIzOTIuNTMgMTg2MS4yIDM4NC4wNCAxODUxLjEgMzgwLjExIDE4NTEuMSAzODAuMTEgMTg3My4wMSAzODMuNCAxODczLjAxIDM4My40IDE4NTUuNTEgMzkyLjUzIDE4NjYuMzQgNDAxLjYzIDE4NTUuNTEgNDAxLjYzIDE4NzMuMDEgNDA0Ljk0IDE4NzMuMDEgNDA0Ljk0IDE4NTEuMSA0MDAuOTkgMTg1MS4xIDM5Mi41MyAxODYxLjIiLz4KICAgICAgPHBhdGggZD0iTTQyOC4yOSwxODUxLjY4Yy0uNjEtLjM2LTEuMjgtLjU1LTIuMDEtLjU1aC0xNy45MnYyMS44OGgzLjI5di03Ljc5bDE0LjY0LS4wM2MuNzMsMCwxLjQtLjE4LDIuMDEtLjUzLjYxLS4zNSwxLjA5LS44MywxLjQ0LTEuNDMuMzYtLjYuNTMtMS4yNi41My0xLjk5di02LjE1YzAtLjcxLS4xOC0xLjM2LS41My0xLjk2LS4zNS0uNi0uODMtMS4wOC0xLjQ0LTEuNDVaTTQyNi45NSwxODYxLjE0YzAsLjItLjA3LjM3LS4yMS41Mi0uMTQuMTQtLjMxLjIxLS41Mi4yMWgtMTMuODJjLS4yLDAtLjM4LS4wNy0uNTMtLjIxLS4xNS0uMTQtLjIzLS4zMS0uMjMtLjUydi01Ljk3YzAtLjIuMDgtLjM4LjIzLS41My4xNS0uMTUuMzMtLjIzLjUzLS4yM2gxMy44MmMuMiwwLC4zOC4wOC41Mi4yMy4xNC4xNS4yMS4zMy4yMS41M3Y1Ljk3WiIvPgogICAgICA8cGF0aCBkPSJNMTIzMS4zNywyODEuODFWMEg0OTMuMDJ2LjY5SDExNi40OEwxNy42OSwxMDMuOTgsMCwxMjIuNDd2MTc1NC43M2gxMjcuNTZsMjIuMjMtMzcuNThoMjg4LjQ4djM4Ljg2aDM1NC4yMWwyNy4wOS0zOC41OGgzMjguNjdsLTI1LjE0LDM4LjU4aDE1NS40OVYzMDcuNjJsLTQ3LjIyLTI1LjgxWk0xMjcyLjA0LDE4NzEuNzhoLTEzNi41OGwyNS4xNC0zOC41OGgtMzQ0LjUxbC0yNy4wOSwzOC41OGgtMzQ0LjAzdi0zOC44NkgxNDYuNTlsLTIuNjEsMy4yMy0xOS42MiwzNC4zNUgzNy41OXYtMzM1LjY5bC0xOS45LTIzLjIyVjExMy42N0wxMTkuMzUsNy4zOWgzNzguMzFsNTMuMTgsMjIuOTYsMi40LDEuOTNoMzgyLjUxbDUxLjYzLTI1LjU4aDIzNy4yOXYyNzkuMDdsNDcuMjIsMjUuODF2MS45NGguMTV2MTU1OC4yNloiLz4KICAgICAgPHBhdGggZD0iTTUuNzgsNTIuNDFsMTEuOTQtNy44NGg1LjczbDExLjkzLDcuODRjMS44OC0uMzksMi45NC0uNjEsNC44Mi0xbC45Ni0xLjQ1Yy0uMzktMS44OC0uNjEtMi45NC0xLTQuODJsLTEyLjg4LTguNDZjLS44My0xLjU1LTEuNTItMi44Mi0yLjM1LTQuMzZ2LTE0LjQ1Yy0xLjM2LTEuMzYtMi4xMi0yLjEyLTMuNDgtMy40OGgtMS43NGMtMS4zNiwxLjM2LTIuMTIsMi4xMi0zLjQ4LDMuNDh2MTQuNDVjLS44MywxLjU1LTEuNTIsMi44Mi0yLjM1LDQuMzZMMSw0NS4xNGMtLjM5LDEuODgtLjYxLDIuOTQtMSw0LjgybC45NiwxLjQ1YzEuODguMzksMi45NC42MSw0LjgyLDFaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
}