:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg: #060a12;
  --bg2: #0a0f1e;
  --bg3: #0e1525;
  --ink: #eef4ff;
  --muted: #7a8fb8;
  --dim: #3d4e6e;
  --line: rgba(57, 232, 255, 0.1);
  --line-s: rgba(57, 232, 255, 0.22);
  --glass: rgba(14, 21, 37, 0.72);
  --cyan: #39e8ff;
  --green: #0f9;
  --pink: #c084fc;
  --purple: #a855f7;
  --cyan-glow: rgba(57, 232, 255, 0.18);
  --green-glow: rgba(0, 255, 153, 0.15);
  --pink-glow: rgba(168, 85, 247, 0.15);
  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rx-xl: 32px;
  --rx-lg: 22px;
  --rx-md: 14px;
  --rx-sm: 8px;
  --site-gutter: 24px;
  --space-section: clamp(80px, 8.5vw, 120px);
  --space-section-tight: clamp(56px, 6vw, 88px);
  --space-section-compact: clamp(40px, 4.5vw, 64px);
  --space-header-content: 48px;
  --space-card-large-y: 64px;
  --space-card-large-x: 64px;
  --space-card-standard-y: 28px;
  --space-card-standard-x: 24px;
  --space-grid: 24px;
}
@media (max-width: 980px) {
  :root {
    --space-header-content: 40px;
    --space-card-large-y: 48px;
    --space-card-large-x: 48px;
    --space-grid: 20px;
  }
}
@media (max-width: 640px) {
  :root {
    --space-header-content: 32px;
    --space-card-large-y: 40px;
    --space-card-large-x: 24px;
    --space-card-standard-y: 24px;
    --space-card-standard-x: 24px;
    --space-grid: 16px;
  }
}
*,
:before,
:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
body {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-family:
    DM Sans,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Noto Sans,
    Ubuntu,
    Cantarell,
    Helvetica Neue,
    sans-serif;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: none;
}
ul {
  padding: 0;
  list-style: none;
}
.ambient {
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0.5;
  border-radius: 999px;
  position: fixed;
}
.ambient-a {
  background: radial-gradient(
    circle,
    rgba(57, 232, 255, 0.25),
    transparent 60%
  );
  width: 700px;
  height: 700px;
  animation: 22s ease-in-out infinite alternate floatA;
  top: -100px;
  left: -200px;
}
.ambient-b {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.18),
    transparent 60%
  );
  width: 600px;
  height: 600px;
  animation: 18s ease-in-out infinite alternate floatB;
  top: 40vh;
  right: -150px;
}
.ambient-c {
  background: radial-gradient(circle, rgba(0, 255, 153, 0.15), transparent 60%);
  width: 500px;
  height: 500px;
  animation: 26s ease-in-out infinite alternate-reverse floatA;
  bottom: 10vh;
  left: 40%;
}
.scanline {
  pointer-events: none;
  z-index: 1;
  opacity: 0.022;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(57, 232, 255, 0.4) 0,
    rgba(57, 232, 255, 0.4) 1px,
    transparent 1px,
    transparent 4px
  );
  background-size: 100% 4px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
@keyframes floatA {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(40px, 60px);
  }
}
@keyframes floatB {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-50px, -40px);
  }
}
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transform: translateY(28px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.inner {
  width: min(var(--max), calc(100% - (var(--site-gutter) * 2)));
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.section {
  padding: var(--space-section) 0 0;
  position: relative;
}
h1,
h2,
h3 {
  text-wrap: balance;
  font-family:
    Clash Display,
    DM Sans,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Noto Sans,
    Ubuntu,
    Cantarell,
    Helvetica Neue;
  font-weight: 600;
  line-height: 1.08;
}
h1 {
  letter-spacing: -0.02em;
  font-size: max(36px, min(6vw, 72px));
}
h2 {
  letter-spacing: -0.02em;
  font-size: max(28px, min(4vw, 50px));
}
h3 {
  letter-spacing: -0.01em;
  font-size: max(18px, min(2.2vw, 22px));
}
em {
  color: var(--cyan);
  font-style: normal;
}
p,
.section-sub,
.hero-sub,
.metric-text span {
  text-wrap: pretty;
}
.section-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--line-s);
  background: rgba(57, 232, 255, 0.06);
  border-radius: 999px;
  margin-bottom: 12px;
  padding: 4px 12px;
  scroll-margin-top: max(112px, min(14vh, 128px));
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-header-content);
}
.section-sub {
  color: var(--muted);
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.6;
}
.btn {
  height: 48px;
  transition: all 0.22s var(--ease);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(90deg, var(--cyan), var(--green));
  color: #020910;
  font-weight: 700;
}
.primary-cta {
  isolation: isolate;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 999px;
  position: relative;
}
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(57, 232, 255, 0.3);
}
.btn-glyph {
  color: #020910;
  width: 16px;
  height: 16px;
  transition:
    transform 0.22s var(--ease),
    opacity 0.22s var(--ease);
  align-items: center;
  justify-items: center;
  margin-left: -2px;
  margin-right: -5px;
  display: inline-grid;
}
.btn-glyph svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
  overflow: visible;
}
.btn-primary:hover .btn-glyph,
.nav-cta:hover .btn-glyph {
  opacity: 0.82;
  transform: translate(2px);
}
.btn-ghost {
  border: 1px solid var(--line-s);
  color: var(--ink);
  background: rgba(6, 10, 18, 0.26);
}
.hero-actions .btn-ghost {
  background: rgba(6, 10, 18, 0.28);
}
.btn-ghost:hover {
  background: rgba(57, 232, 255, 0.1);
  border-color: rgba(57, 232, 255, 0.45);
  transform: translateY(-2px);
}
.linkedin-glyph {
  color: currentColor;
  opacity: 1;
  width: 16px;
  height: 16px;
  transition: transform 0.18s var(--ease);
  align-items: center;
  justify-items: center;
  display: inline-grid;
}
.linkedin-glyph svg {
  fill: currentColor;
  width: 15px;
  height: 15px;
  display: block;
}
.btn-ghost:hover .linkedin-glyph {
  transform: translateY(-1px);
}
.nav-wrap {
  z-index: 100;
  width: min(var(--max), calc(100% - 32px));
  margin: 14px auto 0;
  position: sticky;
  top: 14px;
}
.nav {
  border: 1px solid var(--line-s);
  background: 0 0;
  border-radius: 999px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: max(8px, min(1.1vw, 14px));
  min-height: 64px;
  padding: 10px 12px 10px 18px;
  display: grid;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(57, 232, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.5);
}
.nav:before {
  content: "";
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), transparent 48%),
    radial-gradient(
      circle at 14% 18%,
      rgba(57, 232, 255, 0.055),
      transparent 44%
    ),
    rgba(6, 10, 18, 0.57);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.brand {
  z-index: 1;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  display: flex;
  position: relative;
}
.brand-avatar {
  filter: drop-shadow(0 0 14px rgba(57, 232, 255, 0.224))
    drop-shadow(0 0 20px rgba(0, 255, 153, 0.15));
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  position: relative;
}
.brand-avatar img {
  z-index: 1;
  object-fit: cover;
  border-radius: 999px;
  width: 92%;
  height: 92%;
  display: block;
  position: relative;
}
.brand-avatar picture,
.origin-photo-shell picture,
.avatar-photo-shell picture {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-avatar picture {
  z-index: 1;
  place-items: center;
  display: grid;
  position: relative;
}
.brand-avatar--fallback .brand-avatar-fallback {
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
  display: flex;
}
.brand-avatar-fallback {
  display: none;
}
.brand-name {
  letter-spacing: -0.01em;
  font-family:
    Clash Display,
    ui-sans-serif;
  font-size: 20.4px;
  font-weight: 600;
}
.brand-word {
  display: inline-block;
  position: relative;
}
.brand-name sup {
  color: var(--cyan);
  line-height: 0;
  margin-left: 1px;
  vertical-align: super;
  font-family:
    DM Sans,
    ui-sans-serif;
  font-size: 10px;
}
.nav-links {
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
  justify-items: center;
  gap: max(10px, min(1.8vw, 28px));
  width: 100%;
  min-width: 0;
  display: grid;
  position: relative;
}
.nav-links a {
  color: var(--muted);
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  transition:
    color 0.18s,
    background 0.18s;
}
.nav-links a:not(.nav-cta) {
  text-align: center;
}
.nav-links a:hover {
  color: var(--ink);
  background: rgba(57, 232, 255, 0.06);
}
.nav-cta {
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 999px;
  justify-self: end;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin-left: max(8px, min(1vw, 16px));
  padding: 0 18px;
  font-size: 14px;
  display: flex;
  box-shadow: 0 8px 24px rgba(57, 232, 255, 0.16);
  color: #020910 !important;
  font-weight: 700 !important;
  transition:
    filter 0.2s,
    transform 0.2s,
    box-shadow 0.2s !important;
}
.nav-cta:hover {
  filter: brightness(1.08);
  box-shadow:
    0 10px 30px rgba(57, 232, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #020910 !important;
  background: linear-gradient(90deg, #65efff, #18ffad) !important;
  transform: translateY(-1px) !important;
}
.nav-toggle {
  z-index: 1;
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: 0 0;
  border: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 10px;
  display: none;
  position: relative;
}
.nav-toggle span {
  transform-origin: 50%;
  pointer-events: none;
  width: 22px;
  height: 2px;
  transition:
    transform 0.26s var(--ease),
    opacity 0.18s ease,
    width 0.2s ease;
  background: currentColor;
  border-radius: 2px;
  display: block;
}
.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 800px) {
  .nav {
    grid-template-columns: auto auto;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    border: 1px solid var(--line-s);
    border-radius: var(--rx-lg);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform-origin: top;
    isolation: isolate;
    background: rgba(6, 10, 18, 0.57);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    transition:
      opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.44s;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    overflow: hidden;
    transform: translateY(-12px) scale(0.982);
  }
  .nav-links:before {
    content: "";
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(rgba(255, 255, 255, 0.04), transparent 48%),
      radial-gradient(
        circle at 16% 12%,
        rgba(57, 232, 255, 0.055),
        transparent 46%
      );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .nav-links.open,
  .nav-toggle[aria-expanded="true"] + .nav-links {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
    transform: none;
  }
  .nav-links.closing {
    opacity: 0;
    pointer-events: none;
    visibility: visible;
    transform: translateY(-12px) scale(0.982);
  }
  .nav-links a {
    z-index: 1;
    text-align: center;
    opacity: 0;
    padding: 12px;
    position: relative;
    transform: translateY(8px);
  }
  .nav-links.open a,
  .nav-toggle[aria-expanded="true"] + .nav-links a {
    animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) both navMenuItemIn;
  }
  .nav-cta {
    justify-content: center;
    margin-left: 0;
  }
}
@keyframes navMenuItemIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .nav:before {
    background: rgba(6, 10, 18, 0.88);
  }
  @media (max-width: 800px) {
    .nav-links {
      background: rgba(6, 10, 18, 0.9);
    }
    .nav-links:before {
      display: none;
    }
  }
}
.hero {
  z-index: 2;
  width: 100%;
  min-height: max(620px, min(48vw, 760px));
  padding: clamp(30px, 4.2vh, 44px)
    max(var(--site-gutter), calc((100vw - var(--max)) / 2))
    clamp(28px, 4vh, 42px);
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.88fr);
  align-items: start;
  gap: max(18px, min(2.2vw, 36px));
  margin-left: 0;
  margin-right: 0;
  display: grid;
  position: relative;
  overflow: visible;
}
.anchor-alias {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  scroll-margin-top: max(112px, min(12vh, 136px));
  position: absolute;
  top: 0;
  left: 0;
}
.hero-dot-matrix {
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
  -webkit-mask-composite: source-in, source-in;
  background-image:
    -webkit-image-set(
      url(hero-dot-matrix-static.avif) 1x type("image/avif"),
      url(hero-dot-matrix-static.webp) 1x type("image/webp"),
      url(hero-dot-matrix-static.png) 1x type("image/png")
    ),
    -webkit-radial-gradient(
        circle,
        rgba(57, 232, 255, 0.17) 0,
        rgba(57, 232, 255, 0.17) 1px,
        transparent 1.7px
      ),
    -webkit-radial-gradient(
        circle,
        rgba(0, 255, 153, 0.1) 0,
        rgba(0, 255, 153, 0.1) 1px,
        transparent 1.6px
      );
  background-image:
    image-set(
      "hero-dot-matrix-static.avif" 1x type("image/avif"),
      "hero-dot-matrix-static.webp" 1x type("image/webp"),
      "hero-dot-matrix-static.png" 1x type("image/png")
    ),
    radial-gradient(
      circle,
      rgba(57, 232, 255, 0.17) 0,
      rgba(57, 232, 255, 0.17) 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle,
      rgba(0, 255, 153, 0.1) 0,
      rgba(0, 255, 153, 0.1) 1px,
      transparent 1.6px
    );
  background-position:
    50%,
    0 0,
    11px 11px;
  background-repeat: no-repeat, repeat, repeat;
  background-size:
    cover,
    22px 22px,
    22px 22px;
  width: 100%;
  height: 115%;
  position: absolute;
  top: -9%;
  bottom: -6%;
  left: 0;
  right: 0;
  -webkit-mask-image:
    linear-gradient(#000 0, #000 90%, transparent 100%),
    radial-gradient(
      at 55% 46%,
      #000 0,
      #000 58%,
      rgba(0, 0, 0, 0.72) 74%,
      transparent 94%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.86),
      #000 20%,
      #000 78%,
      rgba(0, 0, 0, 0.55)
    );
  mask-image:
    linear-gradient(#000 0, #000 90%, transparent 100%),
    radial-gradient(
      at 55% 46%,
      #000 0,
      #000 58%,
      rgba(0, 0, 0, 0.72) 74%,
      transparent 94%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.86),
      #000 20%,
      #000 78%,
      rgba(0, 0, 0, 0.55)
    );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}
.hero-content,
.hero-stage {
  position: relative;
}
.hero-content {
  z-index: 5;
  max-width: 620px;
}
.hero-eyebrow {
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(57, 232, 255, 0.04);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}
.eyebrow-dot {
  background: var(--green);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px var(--green);
  border-radius: 50%;
  animation: 2s ease-in-out infinite pulse;
}
@keyframes pulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.hero-headline {
  margin-bottom: 24px;
  line-height: 1.06;
  overflow: visible;
}
.hero-line {
  display: block;
}
.hero-line-break {
  display: inline;
}
.hero-headline em {
  z-index: 0;
  color: transparent;
  white-space: nowrap;
  isolation: isolate;
  width: max-content;
  max-width: none;
  transform: scaleX(var(--hero-accent-fit-scale, 1));
  transform-origin: 0;
  background: linear-gradient(
    105deg,
    var(--cyan) 0%,
    #8cf7ff 24%,
    var(--green) 52%,
    var(--purple) 78%,
    var(--cyan) 100%
  );
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(57, 232, 255, 0.22))
    drop-shadow(0 0 24px rgba(0, 255, 153, 0.16));
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
}
.hero-headline em:after {
  content: attr(data-text);
  z-index: -1;
  pointer-events: none;
  line-height: inherit;
  background: linear-gradient(
    105deg,
    var(--cyan) 0%,
    #8cf7ff 24%,
    var(--green) 52%,
    var(--purple) 78%,
    var(--cyan) 100%
  );
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.22;
  filter: blur(10px) saturate(1.12);
  -webkit-background-clip: text;
  background-clip: text;
  animation: 3.4s ease-in-out infinite heroTitleGlowPulse;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateZ(0) scale(1.01);
}
.hero-sub {
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 36px;
  font-size: max(16px, min(1.8vw, 18px));
  line-height: 1.65;
}
.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
  display: flex;
}
.hero-tags {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 520px);
  display: grid;
}
.tag {
  font-size: var(--tag-fit-size, 12px);
  color: var(--dim);
  padding: 5px var(--tag-pad, 12px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: clip;
  background: rgba(6, 10, 18, 0.28);
  border: 1px solid rgba(57, 232, 255, 0.12);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  font-weight: 500;
  transition:
    color 0.18s,
    border-color 0.18s;
  display: inline-flex;
  overflow: hidden;
}
.tag:first-child,
.tag:nth-child(2),
.tag:nth-child(3),
.tag:nth-child(4),
.tag:nth-child(5),
.tag:nth-child(6) {
  grid-column: span 2;
}
.tag:hover {
  color: var(--cyan);
  border-color: rgba(57, 232, 255, 0.3);
}
.hero-stage {
  z-index: 4;
  --mx: 50%;
  --my: 50%;
  justify-self: start;
  width: min(540px, 52vw);
  position: relative;
  transform: translate(-82px, 51px);
}
.hero-stage.is-visible {
  transform: translate(-82px, 51px);
}
.mock-window {
  isolation: isolate;
  border: 1px solid var(--line-s);
  border-radius: var(--rx-lg);
  width: 100%;
  transition: transform 0.4s var(--ease);
  background:
    radial-gradient(at 18% 0, rgba(57, 232, 255, 0.12), transparent 34%),
    radial-gradient(at 84% 18%, rgba(0, 255, 153, 0.06), transparent 42%),
    linear-gradient(
      145deg,
      rgba(21, 33, 55, 0.42) 0%,
      rgba(8, 14, 26, 0.28) 44%,
      rgba(3, 6, 12, 0.2) 100%
    ),
    rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: visible;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(57, 232, 255, 0.06),
    0 0 0 1px rgba(57, 232, 255, 0.08),
    0 40px 100px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(57, 232, 255, 0.1);
}
.mock-window:before,
.mock-window:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mock-window:before {
  z-index: 0;
  opacity: 0.8;
  background:
    radial-gradient(at 28% -8%, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(at 72% 102%, rgba(57, 232, 255, 0.12), transparent 46%);
}
.mock-window:after {
  z-index: 2;
  opacity: 0.42;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.08),
      transparent 18%,
      transparent 72%,
      rgba(57, 232, 255, 0.05)
    ),
    linear-gradient(rgba(57, 232, 255, 0.08), transparent 18%);
}
.mock-window-bar,
.mock-window-body {
  z-index: 1;
  position: relative;
}
.hero-stage:hover .mock-window {
  transform: perspective(1200px) rotateX(2deg) rotateY(-4deg);
}
.mock-window-bar {
  border-bottom: 1px solid var(--line);
  border-top-left-radius: var(--rx-lg);
  border-top-right-radius: var(--rx-lg);
  background:
    linear-gradient(rgba(9, 14, 25, 0.98), rgba(5, 9, 17, 0.9)),
    rgba(0, 0, 0, 0.9);
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  display: flex;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(57, 232, 255, 0.1);
}
.mock-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}
.mock-dot--red {
  background: #ff5f57;
}
.mock-dot--yellow {
  background: #ffbd2e;
}
.mock-dot--green {
  background: #28c840;
}
.mock-window-title {
  color: var(--dim);
  margin-left: 8px;
  font-family:
    DM Mono,
    Courier New,
    monospace;
  font-size: 12px;
}
.mock-window-body {
  grid-template-columns: minmax(118px, 26%) 1fr;
  min-height: 260px;
  display: grid;
}
.mock-sidebar {
  border-bottom-left-radius: var(--rx-lg);
  background:
    linear-gradient(rgba(57, 232, 255, 0.035), rgba(6, 10, 18, 0.01)),
    rgba(6, 10, 18, 0.01);
  border-right: 1px solid rgba(57, 232, 255, 0.13);
  padding: 14px 0;
  box-shadow:
    inset -1px 0 rgba(57, 232, 255, 0.08),
    inset 1px 0 rgba(255, 255, 255, 0.024);
}
.mock-nav-item {
  color: var(--dim);
  opacity: 0.65;
  cursor: default;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 12px;
  transition:
    background 0.18s,
    color 0.18s;
  display: flex;
}
.mock-nav-item .mock-icon {
  opacity: 0.7;
  font-size: 11px;
}
.mock-nav-item--active {
  color: var(--cyan);
  border-left: 2px solid var(--cyan);
  background: rgba(57, 232, 255, 0.02);
}
.mock-main {
  border-bottom-right-radius: var(--rx-lg);
  background:
    radial-gradient(at 88% 0, rgba(0, 255, 153, 0.07), transparent 42%),
    radial-gradient(at 18% 4%, rgba(57, 232, 255, 0.06), transparent 38%),
    linear-gradient(
      150deg,
      rgba(16, 26, 45, 0.58),
      rgba(6, 10, 18, 0.46) 52%,
      rgba(4, 7, 14, 0.54)
    ),
    rgba(0, 0, 0, 0.46);
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  display: flex;
  box-shadow:
    inset 1px 0 rgba(57, 232, 255, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.035);
}
.mock-stat-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}
.mock-stat {
  border: 1px solid var(--line);
  border-radius: var(--rx-sm);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(10, 20, 34, 0.42);
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  display: flex;
}
.mock-stat--accent {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 42%),
    rgba(0, 255, 153, 0.055);
  border-color: rgba(0, 255, 153, 0.2);
}
.mock-stat-val {
  color: var(--ink);
  font-family:
    Clash Display,
    ui-sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.mock-stat--accent .mock-stat-val {
  color: var(--green);
}
.mock-stat-label {
  color: var(--dim);
  font-size: 10px;
}
.mock-pipeline {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.mock-pipeline-step {
  border-radius: var(--rx-sm);
  border: 1px solid var(--line);
  min-height: 34px;
  color: var(--dim);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.024), transparent 45%),
    rgba(6, 10, 18, 0.54);
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-family:
    DM Mono,
    Courier New,
    monospace;
  font-size: 11px;
  display: flex;
}
.mock-pipeline-step--done {
  color: var(--muted);
  border-color: rgba(57, 232, 255, 0.15);
}
.mock-pipeline-step--active {
  color: var(--cyan);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 45%),
    rgba(57, 232, 255, 0.075);
  border-color: rgba(57, 232, 255, 0.3);
}
.mock-badge {
  border: 1px solid var(--line);
  width: 28px;
  height: 20px;
  color: var(--dim);
  border-radius: 999px;
  flex: 0 0 28px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
}
.mock-badge--green {
  color: var(--green);
  border-color: rgba(0, 255, 153, 0.25);
}
.mock-badge--cyan {
  color: var(--cyan);
  border-color: rgba(57, 232, 255, 0.25);
}
.mock-pulse {
  animation: 1.2s ease-in-out infinite pulse;
}
.mock-card-row {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}
.mock-mini-card {
  border: 1px solid var(--line);
  border-radius: var(--rx-sm);
  color: var(--dim);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.024), transparent 45%),
    rgba(6, 10, 18, 0.54);
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  font-size: 10px;
  display: flex;
}
.mock-mini-bar {
  background: linear-gradient(90deg, var(--cyan), rgba(57, 232, 255, 0.3));
  border-radius: 999px;
  height: 4px;
}
.mock-mini-bar--green {
  background: linear-gradient(90deg, var(--green), rgba(0, 255, 153, 0.3));
}
.float-card {
  border: 1px solid var(--line-s);
  color: var(--muted);
  z-index: 10;
  background: rgba(6, 10, 18, 0.9);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family:
    DM Mono,
    Courier New,
    monospace;
  font-size: 12px;
  animation: 4s ease-in-out infinite alternate floatCard;
  display: flex;
  position: absolute;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.float-card-icon {
  color: var(--cyan);
  font-size: 11px;
}
.float-card-status {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
}
.float-card-status--ok {
  color: var(--green);
  border-color: rgba(0, 255, 153, 0.3);
}
.float-card-status--warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
.float-card--b {
  animation-duration: 3.5s;
  animation-delay: 1.5s;
  top: -16px;
  right: -16px;
}
.float-card--b .float-card-icon {
  color: var(--green);
  text-shadow:
    0 0 10px rgba(0, 255, 153, 0.85),
    0 0 24px rgba(0, 255, 153, 0.58);
  animation: 1.55s ease-in-out infinite architectDiamondPulse;
}
@keyframes floatCard {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
@keyframes architectDiamondPulse {
  0%,
  to {
    opacity: 0.78;
    filter: drop-shadow(0 0 5px rgba(0, 255, 153, 0.55));
    transform: scale(1);
  }
  48% {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(0, 255, 153, 0.95));
    transform: scale(1.18);
  }
}
@keyframes heroTitleGlowPulse {
  0%,
  to {
    opacity: 0.18;
    filter: blur(9px) saturate(1.05);
    transform: translateZ(0) scale(1.006);
  }
  50% {
    opacity: 0.68;
    filter: blur(16px) saturate(1.42);
    transform: translateZ(0) scale(1.028);
  }
}
@media (max-width: 1100px) {
  .hero {
    min-height: auto;
    padding-bottom: max(18px, min(2.4vh, 28px));
  }
  .hero-stage,
  .hero-stage.is-visible {
    transform: translate(-96px, 58px);
  }
  .mock-window-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
    overflow: hidden;
  }
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-top: max(26px, min(4.5vh, 40px));
  }
  .hero-content {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .hero-headline {
    width: 100%;
    max-width: none;
    font-size: 52.5px;
    line-height: 1.02;
  }
  .hero-sub,
  .hero-tags {
    width: 100%;
    max-width: none;
  }
  .hero-line-break {
    display: block;
  }
  .hero-stage {
    display: none;
  }
}
@media (max-width: 560px) {
  .hero-headline {
    font-size: max(40px, min(9.85vw, 51.25px));
  }
  .hero-tags {
    gap: 6px;
  }
  .tag {
    --tag-pad: 7px;
    font-size: var(--tag-fit-size, 10.5px);
    letter-spacing: 0;
  }
  .tag:first-child,
  .tag:nth-child(2),
  .tag:nth-child(3),
  .tag:nth-child(4),
  .tag:nth-child(5),
  .tag:nth-child(6) {
    grid-column: span 2;
  }
}
@media (max-width: 500px) {
  .hero-headline {
    font-size: max(40px, min(9.85vw, 49px));
  }
}
@media (max-width: 460px) {
  .hero-headline {
    font-size: 44px;
  }
}
@media (max-width: 420px) {
  .hero-headline {
    font-size: 40px;
  }
  .hero-headline em {
    font-size: min(1em, calc((100vw - (var(--site-gutter) * 2)) / 9.12));
  }
  .tag {
    --tag-pad: 5px;
    font-size: var(--tag-fit-size, 9.5px);
  }
}
@media (max-width: 380px) {
  .hero-headline {
    font-size: 36px;
  }
}
@media (max-width: 360px) {
  .hero-headline {
    font-size: 34px;
  }
  .hero-tags {
    gap: 5px;
  }
  .tag {
    --tag-pad: 3px;
    font-size: var(--tag-fit-size, 8.4px);
    letter-spacing: -0.01em;
  }
}
[data-spotlight] {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
}
[data-spotlight]:before {
  content: "";
  background: radial-gradient(
    180px circle at var(--mx) var(--my),
    rgba(57, 232, 255, 0.08),
    transparent 80%
  );
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.4s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
[data-spotlight]:hover:before {
  opacity: 1;
}
.metrics-band {
  z-index: 2;
  padding: var(--space-section-compact) 0 var(--space-section-compact);
  margin: 0;
  position: relative;
}
.metrics-band .inner {
  padding: var(--space-card-large-y) var(--space-card-large-x);
  border: 1px solid var(--line);
  border-radius: var(--rx-xl);
  background: var(--glass);
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  display: grid;
}
.metrics-band .inner[data-spotlight]:before {
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(57, 232, 255, 0.11),
    rgba(0, 255, 153, 0.055) 32%,
    transparent 72%
  );
}
.metrics-band .inner[data-spotlight] > * {
  z-index: 1;
  position: relative;
}
.metric-card {
  align-items: center;
  gap: 16px;
  padding: max(10px, min(1.1vw, 12px)) max(12px, min(1.4vw, 20px));
  display: flex;
}
.metrics-band .metric-card,
.metrics-band .metric-divider {
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY(18px);
}
.metrics-band.is-visible .metric-card {
  animation: 0.78s cubic-bezier(0.16, 1, 0.3, 1) both metricRise;
}
.metrics-band.is-visible .metric-divider {
  animation: 0.68s cubic-bezier(0.16, 1, 0.3, 1) both metricDividerIn;
}
.metrics-band.is-visible .metric-card:first-child {
  animation-delay: 80ms;
}
.metrics-band.is-visible .metric-divider:nth-child(2) {
  animation-delay: 0.24s;
}
.metrics-band.is-visible .metric-card:nth-child(3) {
  animation-delay: 0.4s;
}
.metrics-band.is-visible .metric-divider:nth-child(4) {
  animation-delay: 0.56s;
}
.metrics-band.is-visible .metric-card:nth-child(5) {
  animation-delay: 0.72s;
}
.metrics-band.is-visible .metric-divider:nth-child(6) {
  animation-delay: 0.88s;
}
.metrics-band.is-visible .metric-card:nth-child(7) {
  animation-delay: 1.04s;
}
.metric-icon {
  transform-origin: 50%;
  will-change: transform, filter;
  flex-shrink: 0;
  font-size: 24px;
  animation-duration: 9.6s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  display: inline-block;
}
.metrics-band.is-visible .metric-card:first-child .metric-icon {
  animation-name: metricAlarmShake;
  animation-timing-function: linear;
  animation-delay: 0.74s;
}
.metrics-band.is-visible .metric-card:nth-child(3) .metric-icon {
  animation-name: metricBrainBreathe;
  animation-timing-function: ease-in-out;
  animation-delay: 0.74s;
}
.metrics-band.is-visible .metric-card:nth-child(5) .metric-icon {
  animation-name: metricLockImpact;
  animation-timing-function: linear;
  animation-delay: 0.74s;
}
.metrics-band.is-visible .metric-card:nth-child(7) .metric-icon {
  animation-name: metricStepZoom;
  animation-timing-function: step-end;
  animation-delay: 0.74s;
}
.metric-text {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.metric-text strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.metric-text span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.metric-divider {
  background: var(--line-s);
  flex-shrink: 0;
  width: 1px;
  height: 40px;
  margin: 0 4px;
}
@keyframes metricRise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes metricDividerIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scaleY(0.24);
  }
  68% {
    opacity: 0.84;
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scaleY(1);
  }
}
@keyframes metricAlarmShake {
  0%,
  2%,
  14%,
  to {
    filter: none;
    transform: rotate(0) translate(0);
  }
  3% {
    filter: drop-shadow(0 0 8px rgba(57, 232, 255, 0.28));
    transform: rotate(-18deg) translate(-1px);
  }
  4% {
    transform: rotate(18deg) translate(1px);
  }
  5% {
    transform: rotate(-14deg) translate(-1px);
  }
  6% {
    transform: rotate(12deg) translate(1px);
  }
  7.2% {
    transform: rotate(-7deg);
  }
  8.5% {
    transform: rotate(5deg);
  }
  10.5% {
    filter: none;
    transform: rotate(0);
  }
}
@keyframes metricBrainBreathe {
  0%,
  24%,
  39%,
  to {
    filter: drop-shadow(0 0 rgba(192, 132, 252, 0));
    transform: scale(1);
  }
  29% {
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.42));
    transform: scale(1.16);
  }
  34% {
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.26));
    transform: scale(1.07);
  }
}
@keyframes metricLockImpact {
  0%,
  49%,
  64%,
  to {
    filter: none;
    transform: translate(0) rotate(0);
  }
  51% {
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.35));
    transform: translate(3px, -1px) rotate(7deg) scale(1.08);
  }
  53% {
    transform: translate(-5px, 1px) rotate(-11deg) scale(0.94);
  }
  55% {
    transform: translate(4px) rotate(8deg) scale(1.05);
  }
  57% {
    transform: translate(-2px) rotate(-4deg);
  }
  60% {
    transform: translate(1px) rotate(2deg);
  }
}
@keyframes metricStepZoom {
  0%,
  74%,
  98%,
  to {
    filter: none;
    transform: scale(1);
  }
  79%,
  84% {
    filter: drop-shadow(0 0 8px rgba(57, 232, 255, 0.32));
    transform: scale(1.13);
  }
  89%,
  94% {
    filter: drop-shadow(0 0 14px rgba(57, 232, 255, 0.46));
    transform: scale(1.28);
  }
}
@media (max-width: 980px) {
  .metrics-band .inner {
    gap: var(--space-grid);
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  }
  .metrics-band .metric-card:first-child {
    grid-area: 1/1;
  }
  .metrics-band .metric-divider:nth-child(2) {
    grid-area: 1/2;
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 0;
  }
  .metrics-band .metric-card:nth-child(3) {
    grid-area: 1/3;
  }
  .metrics-band .metric-divider:nth-child(4) {
    grid-area: 2/1 / auto/-1;
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .metrics-band .metric-card:nth-child(5) {
    grid-area: 3/1;
  }
  .metrics-band .metric-divider:nth-child(6) {
    grid-area: 3/2;
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 0;
  }
  .metrics-band .metric-card:nth-child(7) {
    grid-area: 3/3;
  }
  .metric-card {
    padding: 10px 6px;
  }
}
@media (max-width: 640px) {
  .metrics-band .inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: var(--space-card-standard-x);
    padding-right: var(--space-card-standard-x);
  }
  .metrics-band .metric-card:first-child,
  .metrics-band .metric-card:nth-child(3),
  .metrics-band .metric-card:nth-child(5),
  .metrics-band .metric-card:nth-child(7) {
    grid-area: auto;
  }
  .metrics-band .metric-card:first-child,
  .metrics-band .metric-card:nth-child(3),
  .metrics-band .metric-card:nth-child(5),
  .metrics-band .metric-card:nth-child(7) {
    grid-area: auto;
  }
  .metrics-band .metric-divider:nth-child(2),
  .metrics-band .metric-divider:nth-child(4),
  .metrics-band .metric-divider:nth-child(6) {
    grid-area: auto;
    align-self: auto;
    width: 100% !important;
    min-width: 0;
    height: 0 !important;
    min-height: 0;
    border-top: 1px solid var(--line-s);
    background: none !important;
    margin: 10px 0;
    animation-name: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .metric-card {
    padding: 14px 0;
  }
  .metric-card {
    padding: 14px 0;
  }
}
.wireflow-origin-section {
  padding-top: var(--space-section-compact);
  padding-bottom: 0;
  scroll-margin-top: max(112px, min(12vh, 136px));
}
.origin-card {
  padding: var(--space-card-large-y) var(--space-card-large-x);
  border: 1px solid var(--line-s);
  border-radius: var(--rx-xl);
  background: rgba(10, 15, 30, 0.68);
  position: relative;
  overflow: hidden;
}
.origin-glow {
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(at 74% 45%, rgba(57, 232, 255, 0.14), transparent 48%),
    radial-gradient(at 38% 62%, rgba(0, 255, 153, 0.08), transparent 52%),
    radial-gradient(at 66% 72%, rgba(168, 85, 247, 0.08), transparent 46%);
  position: absolute;
  top: -34%;
  bottom: -34%;
  left: -34%;
  right: -34%;
}
.origin-layout {
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.72fr);
  align-items: center;
  gap: max(34px, min(6vw, 82px));
  display: grid;
  position: relative;
}
.origin-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  display: flex;
  position: relative;
}
.origin-content h2 {
  max-width: 620px;
  font-size: max(28px, min(4vw, 48px));
}
.origin-content p {
  max-width: 610px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.origin-loop {
  border-top: 1px solid var(--line);
  gap: 0;
  width: min(100%, 580px);
  margin-top: 6px;
  display: grid;
}
.origin-loop-item {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  padding: 14px 0;
  display: grid;
  transform: translate(-12px, 16px);
}
.origin-card.is-visible .origin-loop-item {
  animation: originLoopItemIn 0.72s var(--ease) both;
}
.origin-card.is-visible .origin-loop-item:first-child {
  animation-delay: 0.24s;
}
.origin-card.is-visible .origin-loop-item:nth-child(2) {
  animation-delay: 0.4s;
}
.origin-card.is-visible .origin-loop-item:nth-child(3) {
  animation-delay: 0.56s;
}
.origin-card.is-visible .origin-loop-item > span {
  animation: originLoopBadgeIn 0.72s var(--ease) both;
}
.origin-card.is-visible .origin-loop-item:first-child > span {
  animation-delay: 0.34s;
}
.origin-card.is-visible .origin-loop-item:nth-child(2) > span {
  animation-delay: 0.5s;
}
.origin-card.is-visible .origin-loop-item:nth-child(3) > span {
  animation-delay: 0.66s;
}
.origin-loop-item > span {
  width: 34px;
  height: 24px;
  color: var(--cyan);
  border: 1px solid rgba(57, 232, 255, 0.22);
  border-radius: 999px;
  grid-row: span 2;
  justify-content: center;
  align-items: center;
  font-family:
    DM Mono,
    monospace;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}
.origin-loop-item strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}
.origin-loop-item small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
}
@keyframes originLoopItemIn {
  0% {
    opacity: 0;
    transform: translate(-12px, 16px);
  }
  58% {
    opacity: 1;
    transform: translate(2px, -1px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes originLoopBadgeIn {
  0% {
    border-color: rgba(57, 232, 255, 0.12);
    box-shadow: 0 0 rgba(57, 232, 255, 0);
  }
  58% {
    border-color: rgba(57, 232, 255, 0.48);
    box-shadow: 0 0 18px rgba(57, 232, 255, 0.24);
  }
  to {
    border-color: rgba(57, 232, 255, 0.22);
    box-shadow: 0 0 rgba(57, 232, 255, 0);
  }
}
.origin-visual {
  isolation: isolate;
  --origin-cycle: 9.6s;
  --origin-quint: cubic-bezier(0.16, 1, 0.3, 1);
  align-items: center;
  justify-items: center;
  min-height: 360px;
  display: grid;
  position: relative;
}
.origin-visual:before,
.origin-visual:after {
  content: "";
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}
.origin-visual:before {
  border: 1px solid rgba(57, 232, 255, 0.18);
  width: min(380px, 78vw);
  height: min(380px, 78vw);
  transform: rotate(-14deg) scaleX(1.08);
  box-shadow:
    0 0 58px rgba(57, 232, 255, 0.12),
    inset 0 0 44px rgba(0, 255, 153, 0.05);
}
.origin-visual:after {
  filter: blur(16px);
  opacity: 0.48;
  background: conic-gradient(
    from 150deg,
    rgba(57, 232, 255, 0.38),
    transparent 24%,
    rgba(0, 255, 153, 0.28),
    transparent 54%,
    rgba(168, 85, 247, 0.32),
    transparent 82%,
    rgba(57, 232, 255, 0.28)
  );
  width: min(310px, 66vw);
  height: min(310px, 66vw);
  animation: 18s linear infinite avatarSpin;
}
.origin-photo-shell {
  z-index: 3;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: max(190px, min(22vw, 260px));
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(57, 232, 255, 0.28),
    0 0 0 10px rgba(57, 232, 255, 0.043),
    0 28px 80px rgba(0, 0, 0, 0.52),
    0 0 68px rgba(57, 232, 255, 0.14);
}
.origin-photo-shell img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.origin-constellation {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: visible;
}
.origin-link {
  fill: none;
  stroke: rgba(57, 232, 255, 0.64);
  stroke-width: 1.45px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1px;
  filter: drop-shadow(0 0 6px rgba(57, 232, 255, 0.48))
    drop-shadow(0 0 16px rgba(57, 232, 255, 0.18));
  opacity: 0;
  animation: originLinkA var(--origin-cycle) ease-in-out infinite;
}
.origin-link-b {
  animation-name: originLinkB;
}
.origin-link-c {
  stroke: rgba(0, 255, 153, 0.58);
  animation-name: originLinkC;
}
.origin-signal,
.origin-tax-meter {
  border: 1px solid var(--line-s);
  opacity: 0;
  animation-duration: var(--origin-cycle);
  animation-timing-function: var(--origin-quint);
  background: rgba(6, 10, 18, 0.78);
  border-radius: 999px;
  animation-iteration-count: infinite;
  position: absolute;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.origin-signal {
  z-index: 6;
  flex-direction: column;
  gap: 2px;
  min-width: 158px;
  padding: 9px 13px;
  display: flex;
}
.origin-signal:before {
  content: "";
  width: 6px;
  height: 6px;
  animation-duration: var(--origin-cycle);
  background: #ff4d5f;
  border-radius: 50%;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(255, 77, 95, 0.72);
}
.origin-signal strong {
  color: var(--ink);
  padding-left: 14px;
  font-size: 12px;
  line-height: 1;
}
.origin-signal span {
  color: var(--dim);
  padding-left: 14px;
  font-family:
    DM Mono,
    monospace;
  font-size: 10px;
}
.origin-signal-a {
  --tx: -50%;
  --ty: 0px;
  --start-x: 0px;
  --start-y: 132px;
  --mid-x: 0px;
  --mid-y: 62px;
  --out-x: 0px;
  --out-y: -42px;
  --burst-x: 0px;
  --burst-y: -132px;
  animation-name: originSignalA;
  top: 18px;
  left: 50%;
  transform: translate(-50%);
}
.origin-signal-b {
  --tx: 0px;
  --ty: 0px;
  --start-x: 122px;
  --start-y: -90px;
  --mid-x: 56px;
  --mid-y: -42px;
  --out-x: -46px;
  --out-y: 34px;
  --burst-x: -148px;
  --burst-y: 110px;
  animation-name: originSignalB;
  top: 230px;
  left: 2px;
}
.origin-signal-c {
  --tx: 0px;
  --ty: 0px;
  --start-x: -122px;
  --start-y: -90px;
  --mid-x: -56px;
  --mid-y: -42px;
  --out-x: 46px;
  --out-y: 34px;
  --burst-x: 148px;
  --burst-y: 110px;
  animation-name: originSignalC;
  top: 230px;
  right: 2px;
}
.origin-signal-a:before {
  animation-name: originDotA;
}
.origin-signal-b:before {
  animation-name: originDotB;
}
.origin-signal-c:before {
  animation-name: originDotC;
}
.origin-tax-meter {
  z-index: 4;
  --tx: -50%;
  --ty: 0px;
  --start-x: 0px;
  --start-y: -74px;
  --mid-x: 0px;
  --mid-y: -34px;
  --out-x: 0px;
  --out-y: 34px;
  --burst-x: 0px;
  --burst-y: 96px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  animation-name: originMeterNode;
  display: flex;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%);
}
.origin-tax-meter span {
  color: var(--cyan);
  white-space: nowrap;
  font-family:
    DM Mono,
    monospace;
  font-size: 11px;
}
.origin-tax-meter i {
  width: 62px;
  height: 4px;
  animation: originMeterGlow var(--origin-cycle) ease-in-out infinite;
  background: rgba(57, 232, 255, 0.12);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(57, 232, 255, 0.08);
}
.origin-tax-meter i:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transform-origin: 0;
  width: 100%;
  animation: originMeterFill var(--origin-cycle) linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  box-shadow:
    0 0 18px rgba(57, 232, 255, 0.55),
    0 0 36px rgba(0, 255, 153, 0.32);
}
@media (min-width: 821px) and (max-width: 980px) {
  .origin-signal-b,
  .origin-signal-c {
    width: calc(50% - 2.5px);
    min-width: 0;
    padding: 8px 10px;
  }
  .origin-signal-b {
    left: 0;
  }
  .origin-signal-c {
    right: 0;
  }
  .origin-signal-b strong,
  .origin-signal-c strong {
    font-size: 11px;
  }
  .origin-signal-b span,
  .origin-signal-c span {
    font-size: 9px;
  }
}
@keyframes originSignalA {
  0%,
  12% {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--start-x)),
        calc(var(--ty) + var(--start-y))
      )
      scale(0.72);
  }
  17% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.045);
  }
  21%,
  70% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.02);
  }
  79% {
    opacity: 0.98;
    transform: translate(
        calc(var(--tx) + var(--out-x)),
        calc(var(--ty) + var(--out-y))
      )
      scale(1.08);
  }
  84% {
    opacity: 0.68;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.84);
  }
  90%,
  to {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.46);
  }
}
@keyframes originMeterNode {
  0%,
  2% {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--start-x)),
        calc(var(--ty) + var(--start-y))
      )
      scale(0.72);
  }
  8% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.035);
  }
  12%,
  70% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.02);
  }
  79% {
    opacity: 0.98;
    transform: translate(
        calc(var(--tx) + var(--out-x)),
        calc(var(--ty) + var(--out-y))
      )
      scale(1.08);
  }
  84% {
    opacity: 0.68;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.84);
  }
  90%,
  to {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.46);
  }
}
@keyframes originSignalC {
  0%,
  21% {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--start-x)),
        calc(var(--ty) + var(--start-y))
      )
      scale(0.72);
  }
  26% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.04);
  }
  30%,
  70% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.02);
  }
  79% {
    opacity: 0.98;
    transform: translate(
        calc(var(--tx) + var(--out-x)),
        calc(var(--ty) + var(--out-y))
      )
      scale(1.08);
  }
  84% {
    opacity: 0.68;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.84);
  }
  90%,
  to {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.46);
  }
}
@keyframes originSignalB {
  0%,
  30% {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--start-x)),
        calc(var(--ty) + var(--start-y))
      )
      scale(0.72);
  }
  35% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.04);
  }
  39%,
  70% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.02);
  }
  79% {
    opacity: 0.98;
    transform: translate(
        calc(var(--tx) + var(--out-x)),
        calc(var(--ty) + var(--out-y))
      )
      scale(1.08);
  }
  84% {
    opacity: 0.68;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.84);
  }
  90%,
  to {
    opacity: 0;
    transform: translate(
        calc(var(--tx) + var(--burst-x)),
        calc(var(--ty) + var(--burst-y))
      )
      scale(0.46);
  }
}
@keyframes originLinkB {
  0%,
  22% {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
  31%,
  70% {
    opacity: 0.7;
    stroke-dashoffset: 0;
  }
  78% {
    opacity: 0.28;
    stroke-dashoffset: 0;
  }
  90%,
  to {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
}
@keyframes originLinkA {
  0%,
  31% {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
  40%,
  70% {
    opacity: 0.72;
    stroke-dashoffset: 0;
  }
  78% {
    opacity: 0.28;
    stroke-dashoffset: 0;
  }
  90%,
  to {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
}
@keyframes originLinkC {
  0%,
  35% {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
  44%,
  70% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }
  78% {
    opacity: 0.26;
    stroke-dashoffset: 0;
  }
  90%,
  to {
    opacity: 0;
    stroke-dashoffset: 1px;
  }
}
@keyframes originMeterFill {
  0%,
  8% {
    filter: brightness();
    transform: scaleX(0);
  }
  39% {
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(57, 232, 255, 0.74));
    transform: scaleX(1);
  }
  50%,
  70% {
    filter: brightness(1.65) drop-shadow(0 0 8px rgba(57, 232, 255, 0.9))
      drop-shadow(0 0 18px rgba(0, 255, 153, 0.78))
      drop-shadow(0 0 30px rgba(0, 255, 153, 0.42));
    transform: scaleX(1);
  }
  90%,
  to {
    filter: brightness();
    transform: scaleX(1);
  }
}
@keyframes originMeterGlow {
  0%,
  8%,
  90%,
  to {
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(57, 232, 255, 0.08);
  }
  39% {
    filter: drop-shadow(0 0 8px rgba(57, 232, 255, 0.58));
    box-shadow:
      inset 0 0 0 1px rgba(57, 232, 255, 0.14),
      0 0 14px rgba(57, 232, 255, 0.26);
  }
  50%,
  70% {
    filter: drop-shadow(0 0 10px rgba(57, 232, 255, 0.82))
      drop-shadow(0 0 22px rgba(0, 255, 153, 0.62))
      drop-shadow(0 0 42px rgba(0, 255, 153, 0.3));
    box-shadow:
      inset 0 0 0 1px rgba(57, 232, 255, 0.22),
      0 0 18px rgba(57, 232, 255, 0.42),
      0 0 34px rgba(0, 255, 153, 0.28);
  }
}
@keyframes originDotA {
  0%,
  12.4% {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
  12.8%,
  14%,
  15.3%,
  16.4% {
    opacity: 1;
    background: #ff4d5f;
    box-shadow: 0 0 13px rgba(255, 77, 95, 0.76);
  }
  13.4%,
  14.7%,
  15.9% {
    opacity: 0.14;
    box-shadow: none;
    background: #ff4d5f;
  }
  17.8%,
  70% {
    opacity: 1;
    background: var(--green);
    box-shadow: 0 0 14px rgba(0, 255, 153, 0.72);
  }
  90%,
  to {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
}
@keyframes originDotC {
  0%,
  21.4% {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
  21.8%,
  23%,
  24.3%,
  25.4% {
    opacity: 1;
    background: #ff4d5f;
    box-shadow: 0 0 13px rgba(255, 77, 95, 0.76);
  }
  22.4%,
  23.7%,
  24.9% {
    opacity: 0.14;
    box-shadow: none;
    background: #ff4d5f;
  }
  26.8%,
  70% {
    opacity: 1;
    background: var(--green);
    box-shadow: 0 0 14px rgba(0, 255, 153, 0.72);
  }
  90%,
  to {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
}
@keyframes originDotB {
  0%,
  30.4% {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
  30.8%,
  32%,
  33.3%,
  34.4% {
    opacity: 1;
    background: #ff4d5f;
    box-shadow: 0 0 13px rgba(255, 77, 95, 0.76);
  }
  31.4%,
  32.7%,
  33.9% {
    opacity: 0.14;
    box-shadow: none;
    background: #ff4d5f;
  }
  35.8%,
  70% {
    opacity: 1;
    background: var(--green);
    box-shadow: 0 0 14px rgba(0, 255, 153, 0.72);
  }
  90%,
  to {
    opacity: 0;
    box-shadow: none;
    background: #ff4d5f;
  }
}
@media (max-width: 820px) {
  .origin-layout {
    grid-template-columns: 1fr;
  }
  .origin-visual {
    min-height: 310px;
  }
}
@media (max-width: 520px) {
  .origin-content {
    text-align: center;
    align-items: center;
  }
  .origin-loop-item {
    text-align: left;
  }
  .origin-signal {
    min-width: 142px;
    padding: 8px 11px;
  }
  .origin-signal:before {
    left: 11px;
  }
  .origin-signal-a {
    --start-y: 112px;
    --out-y: -34px;
    --burst-y: -108px;
    top: 8px;
    left: 50%;
  }
  .origin-signal-b {
    --start-x: 104px;
    --start-y: -64px;
    --out-x: -36px;
    --out-y: 28px;
    --burst-x: -118px;
    --burst-y: 86px;
    top: 184px;
    left: -8px;
  }
  .origin-signal-c {
    --start-x: -104px;
    --start-y: -64px;
    --out-x: 36px;
    --out-y: 28px;
    --burst-x: 118px;
    --burst-y: 86px;
    top: 184px;
    right: -8px;
  }
  .origin-tax-meter {
    --start-y: -56px;
    --out-y: 30px;
    --burst-y: 78px;
    bottom: 20px;
  }
}
#capabilities {
  padding-top: var(--space-section-tight);
  padding-bottom: 0;
}
.caps-grid {
  gap: var(--space-grid);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}
@media (max-width: 1100px) {
  .caps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .caps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 440px) {
  .caps-grid {
    grid-template-columns: 1fr;
  }
}
.cap-card {
  padding: var(--space-card-standard-y) var(--space-card-standard-x);
  border: 1px solid var(--line);
  border-radius: var(--rx-lg);
  transition:
    border-color 0.22s,
    box-shadow 0.22s,
    transform 0.22s var(--ease);
  background: rgba(10, 15, 30, 0.6);
  flex-direction: column;
  gap: 14px;
  display: flex;
}
.cap-card:hover {
  border-color: rgba(57, 232, 255, 0.3);
  transform: translateY(-4px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(57, 232, 255, 0.08);
}
.cap-icon {
  border: 1px solid var(--line-s);
  border-radius: var(--rx-md);
  width: 44px;
  height: 44px;
  color: var(--cyan);
  background: rgba(57, 232, 255, 0.06);
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  display: grid;
}
.cap-icon svg {
  width: 24px;
  height: 24px;
}
.cap-card h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.cap-card p {
  color: var(--muted);
  flex: 1;
  font-size: 13px;
  line-height: 1.55;
}
.cap-tags {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  display: flex;
}
.cap-tags span {
  color: var(--dim);
  border: 1px solid var(--line);
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
}
.nda-section {
  padding-top: var(--space-section-tight);
  background: 0 0;
  padding-bottom: 0;
}
.nda-banner {
  align-items: center;
  gap: var(--space-grid);
  padding: var(--space-card-standard-y) var(--space-card-standard-x);
  border-radius: var(--rx-xl);
  margin-bottom: var(--space-header-content);
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.25);
  display: flex;
}
.nda-lock {
  flex-shrink: 0;
  font-size: 32px;
}
.nda-banner-text h2 {
  margin-bottom: 8px;
  font-size: max(20px, min(3vw, 30px));
}
.nda-banner-text p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.case-study {
  border: 1px solid var(--line);
  border-radius: var(--rx-xl);
  background: rgba(10, 15, 30, 0.6);
  overflow: hidden;
}
.case-study-header {
  padding: var(--space-card-large-y) var(--space-card-large-x);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.case-study-header h3 {
  margin-top: 8px;
  margin-bottom: 12px;
}
.case-study-header p {
  color: var(--muted);
  width: 100%;
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
}
.case-study-body {
  padding: var(--space-card-large-y) var(--space-card-large-x);
  gap: var(--space-grid);
  flex-direction: column;
  display: flex;
}
.flow-diagram {
  justify-content: space-between;
  align-items: center;
  gap: max(8px, min(1.2vw, 16px));
  width: 100%;
  padding-bottom: 8px;
  display: flex;
  overflow: hidden;
}
.flow-node {
  border: 1px solid var(--line);
  border-radius: var(--rx-md);
  cursor: default;
  background: rgba(6, 10, 18, 0.7);
  flex-direction: column;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 14px;
  transition:
    border-color 0.22s,
    box-shadow 0.22s;
  display: flex;
}
.flow-diagram .flow-node,
.flow-diagram .flow-arrow {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}
.flow-diagram.is-visible .flow-node,
.flow-diagram.is-visible .flow-arrow {
  animation: flowItemSettle 0.5s var(--ease) forwards;
}
.flow-diagram.is-visible > :first-child {
  animation-delay: 20ms;
}
.flow-diagram.is-visible > :nth-child(2) {
  animation-delay: 0.12s;
}
.flow-diagram.is-visible > :nth-child(3) {
  animation-delay: 0.22s;
}
.flow-diagram.is-visible > :nth-child(4) {
  animation-delay: 0.32s;
}
.flow-diagram.is-visible > :nth-child(5) {
  animation-delay: 0.42s;
}
.flow-diagram.is-visible > :nth-child(6) {
  animation-delay: 0.52s;
}
.flow-diagram.is-visible > :nth-child(7) {
  animation-delay: 0.62s;
}
.flow-diagram.is-visible > :nth-child(8) {
  animation-delay: 0.72s;
}
.flow-diagram.is-visible > :nth-child(9) {
  animation-delay: 0.82s;
}
.flow-node:hover {
  border-color: rgba(57, 232, 255, 0.3);
  box-shadow: 0 0 20px rgba(57, 232, 255, 0.08);
}
.flow-node-icon {
  font-size: 18px;
}
.flow-node-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.flow-node-sub {
  color: var(--dim);
  text-align: center;
  font-family:
    DM Mono,
    monospace;
  font-size: 10px;
}
.flow-node--input .flow-node-icon {
  color: var(--muted);
}
.flow-node--process .flow-node-icon {
  color: var(--cyan);
}
.flow-node--ai {
  border-color: rgba(57, 232, 255, 0.25);
}
.flow-node--ai .flow-node-icon {
  color: var(--cyan);
}
.flow-node--human {
  border-color: rgba(0, 255, 153, 0.2);
}
.flow-node--human .flow-node-icon {
  color: var(--green);
}
.flow-node--output {
  border-color: rgba(168, 85, 247, 0.2);
}
.flow-node--output .flow-node-icon {
  color: var(--purple);
}
.flow-arrow {
  color: var(--dim);
  text-align: center;
  flex: 0 0 18px;
  font-size: 18px;
}
@keyframes flowItemSettle {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.redacted-dash {
  border-radius: var(--rx-md);
  background:
    radial-gradient(
      circle at 85% 18%,
      rgba(0, 255, 153, 0.08),
      transparent 30%
    ),
    rgba(6, 10, 18, 0.5);
  border: 1px solid rgba(57, 232, 255, 0.12);
  overflow: hidden;
}
.redacted-dash-header {
  border-bottom: 1px solid var(--line);
  background: rgba(6, 10, 18, 0.5);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  display: flex;
}
.redact-label {
  letter-spacing: 0.1em;
  color: var(--purple);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}
.redact-tag {
  color: var(--dim);
  font-family:
    DM Mono,
    monospace;
  font-size: 12px;
}
.redacted-dash-body {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  display: grid;
}
.redact-metrics {
  grid-row: 1 / span 4;
  gap: 10px;
  display: grid;
}
.redact-metric {
  border: 1px solid var(--line);
  border-radius: var(--rx-sm);
  background: rgba(57, 232, 255, 0.035);
  flex-direction: column;
  justify-content: center;
  min-height: 104px;
  padding: 18px;
  display: flex;
}
.redact-metric span {
  color: var(--ink);
  font-family:
    Clash Display,
    ui-sans-serif;
  font-size: max(28px, min(3.2vw, 34px));
  line-height: 1;
  display: block;
}
.redact-metric small {
  color: var(--dim);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.25;
  display: block;
}
.redact-metric--hot {
  background: rgba(0, 255, 153, 0.05);
  border-color: rgba(0, 255, 153, 0.22);
}
.redact-metric--hot span {
  color: var(--green);
}
.redact-row {
  border-radius: var(--rx-sm);
  background: rgba(57, 232, 255, 0.024);
  border: 1px solid rgba(57, 232, 255, 0.08);
  grid-column: 2;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.redact-row:before {
  content: "";
  background: linear-gradient(
    105deg,
    transparent 0,
    transparent 38%,
    rgba(57, 232, 255, 0.09),
    transparent 62%,
    transparent 100%
  );
  animation: 3.6s ease-in-out infinite redactSweep;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(-120%);
}
.redact-row.row-active {
  background: rgba(57, 232, 255, 0.055);
  border-color: rgba(57, 232, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(57, 232, 255, 0.035),
    0 0 24px rgba(57, 232, 255, 0.06);
}
.redact-copy {
  z-index: 1;
  flex: 1;
  min-width: 0;
  position: relative;
}
.redact-copy strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.15;
  display: block;
}
.redact-copy span {
  color: var(--dim);
  margin-top: 4px;
  font-size: 11px;
  display: block;
}
.redact-progress {
  background: rgba(57, 232, 255, 0.07);
  border-radius: 999px;
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
}
.redact-progress i {
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), rgba(0, 255, 153, 0.7));
  transform-origin: 0;
  height: 100%;
  animation: redactProgress 2.8s var(--ease) infinite alternate;
  display: block;
}
.redact-badge {
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
  z-index: 1;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 11px;
  position: relative;
}
.redact-badge--green {
  color: var(--green);
  border-color: rgba(0, 255, 153, 0.25);
}
.redact-badge--cyan {
  color: var(--cyan);
  border-color: rgba(57, 232, 255, 0.25);
}
.redact-badge--purple {
  color: var(--purple);
  border-color: rgba(168, 85, 247, 0.28);
}
.redacted-dash.is-visible .redact-row,
.redacted-dash.is-visible .redact-metric {
  animation: redactedItemIn 0.55s var(--ease) both;
}
.redacted-dash.is-visible .redact-metric:first-child {
  animation-delay: 40ms;
}
.redacted-dash.is-visible .redact-metric:nth-child(2) {
  animation-delay: 0.13s;
}
.redacted-dash.is-visible .redact-metric:nth-child(3) {
  animation-delay: 0.22s;
}
.redacted-dash.is-visible .redact-row:nth-child(2) {
  animation-delay: 0.18s;
}
.redacted-dash.is-visible .redact-row:nth-child(3) {
  animation-delay: 0.3s;
}
.redacted-dash.is-visible .redact-row:nth-child(4) {
  animation-delay: 0.42s;
}
.redacted-dash.is-visible .redact-row:nth-child(5) {
  animation-delay: 0.54s;
}
@keyframes redactedItemIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes redactSweep {
  0%,
  35% {
    opacity: 0;
    transform: translate(-120%);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(120%);
  }
}
@keyframes redactProgress {
  0% {
    transform: scaleX(0.72);
  }
  to {
    transform: scaleX(1);
  }
}
@media (max-width: 900px) {
  .nda-banner {
    flex-direction: column;
  }
  .flow-diagram {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .flow-diagram::-webkit-scrollbar {
    display: none;
  }
  .flow-diagram.flow-carousel {
    scroll-snap-type: none;
    overflow-x: hidden;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 9%,
      #000 91%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 9%,
      #000 91%,
      transparent
    );
  }
  .flow-diagram.flow-carousel > * {
    opacity: 1;
    flex: none;
    transform: none;
    animation: none !important;
  }
  .flow-diagram.flow-carousel .flow-node {
    flex-basis: 158px;
    min-width: 158px;
  }
  .flow-diagram.flow-carousel .flow-arrow {
    flex-basis: 26px;
    align-items: center;
    justify-items: center;
    min-width: 26px;
    display: grid;
  }
  .flow-diagram.flow-carousel .flow-seam-arrow {
    color: rgba(57, 232, 255, 0.68);
    text-shadow: 0 0 14px rgba(57, 232, 255, 0.28);
  }
  .flow-clone {
    pointer-events: none;
  }
  .flow-node {
    min-width: 118px;
  }
  .redacted-dash-body {
    grid-template-columns: 1fr;
  }
  .redact-metrics,
  .redact-row {
    grid-area: auto;
  }
}
.module-section {
  background: 0 0;
}
.module-header {
  max-width: 560px;
  margin: 0 auto var(--space-header-content);
  text-align: center;
}
.module-board {
  border: 1px solid var(--line);
  border-radius: var(--rx-xl);
  background: rgba(6, 10, 18, 0.8);
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 0;
  width: min(1040px, 100%);
  min-height: 320px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  position: relative;
  overflow: hidden;
}
.module-shelf {
  border-right: 1px solid var(--line);
  padding: var(--space-card-standard-x);
  background: rgba(10, 15, 30, 0.5);
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.module-file {
  --module-rgb: 57, 232, 255;
  border: 1px solid var(--line);
  border-radius: var(--rx-sm);
  color: var(--muted);
  cursor: grab;
  transition:
    border-color 0.18s,
    color 0.18s,
    transform 0.18s,
    box-shadow 0.18s,
    opacity 0.42s var(--ease);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: rgba(6, 10, 18, 0.6);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-family:
    DM Mono,
    Courier New,
    monospace;
  font-size: 12px;
  line-height: 1.1;
  display: flex;
  position: relative;
}
.module-file:hover {
  border-color: rgba(var(--module-rgb), 0.34);
  color: rgb(var(--module-rgb));
  box-shadow: 0 0 18px rgba(var(--module-rgb), 0.08);
  transform: translate(3px);
}
.module-file.placed {
  opacity: 0.4;
  pointer-events: none;
}
.module-file.placed.is-clicking {
  opacity: 1;
}
.module-file.is-clicking {
  border-color: rgba(var(--module-rgb), 0.48);
  color: rgb(var(--module-rgb));
  box-shadow:
    0 0 0 1px rgba(var(--module-rgb), 0.08),
    0 0 24px rgba(var(--module-rgb), 0.16);
  transform: translate(4px) scale(1.01);
}
.module-file.restoring {
  animation: shelfFileRestore 0.58s var(--ease) var(--restore-delay, 0s) both;
}
.mf-icon {
  color: rgb(var(--module-rgb));
  text-shadow: 0 0 10px rgba(var(--module-rgb), 0.42);
  flex-shrink: 0;
  font-size: 11px;
}
.mf-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mf-size {
  color: var(--dim);
  font-size: 10px;
}
.module-cursor {
  --cursor-x: 24px;
  --cursor-y: 24px;
  --cursor-speed: 0.46s;
  --cursor-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pointer-hotspot-x: 12px;
  --pointer-hotspot-y: 1px;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  width: 34px;
  height: 38px;
  transform: translate3d(
    calc(var(--cursor-x) - var(--pointer-hotspot-x)),
    calc(var(--cursor-y) - var(--pointer-hotspot-y)),
    0
  );
  transition:
    transform var(--cursor-speed) var(--cursor-ease),
    opacity 0.24s ease,
    filter 0.24s ease;
  transform-origin: var(--pointer-hotspot-x) var(--pointer-hotspot-y);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
  position: absolute;
  top: 0;
  left: 0;
}
.module-cursor.is-visible {
  opacity: 1;
}
.module-cursor-shape {
  background: linear-gradient(
    145deg,
    #fff 0%,
    #eafcff 36%,
    #73f1ff 70%,
    #68ffc5 100%
  );
  width: 34px;
  height: 38px;
  position: absolute;
  top: 0;
  left: 0;
  scale: 1;
  box-shadow:
    inset 5px -8px 14px rgba(57, 232, 255, 0.18),
    0 0 20px rgba(57, 232, 255, 0.34);
  -webkit-mask: url(pointer.svg?v=20260528a) 0 0 / contain no-repeat;
  mask: url(pointer.svg?v=20260528a) 0 0 / contain no-repeat;
}
.module-cursor:after {
  content: "";
  left: calc(var(--pointer-hotspot-x) - 9px);
  top: calc(var(--pointer-hotspot-y) - 9px);
  opacity: 0;
  background: rgba(57, 232, 255, 0.12);
  border: 1px solid rgba(57, 232, 255, 0.76);
  border-radius: 999px;
  width: 18px;
  height: 18px;
  position: absolute;
  transform: scale(0.45);
}
.module-cursor.is-clicking .module-cursor-shape {
  animation: 0.38s cubic-bezier(0.16, 1, 0.3, 1) both moduleCursorTap;
}
.module-cursor.is-clicking:after {
  animation: 0.44s ease-out both moduleCursorPulse;
}
@keyframes moduleCursorTap {
  0%,
  to {
    scale: 1;
  }
  46% {
    scale: 0.92;
  }
}
@keyframes moduleCursorPulse {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }
  34% {
    opacity: 0.95;
    transform: scale(1.45);
  }
  to {
    opacity: 0;
    transform: scale(0.45);
  }
}
.module-canvas {
  padding: var(--space-card-standard-x);
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.canvas-grid-bg {
  background-image:
    linear-gradient(rgba(57, 232, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 232, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.canvas-placeholder {
  color: var(--dim);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  font-family:
    DM Mono,
    monospace;
  font-size: 13px;
  transition: opacity 0.4s;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.canvas-node {
  --module-rgb: 57, 232, 255;
  border: 1px solid rgba(var(--module-rgb), 0.38);
  border-radius: var(--rx-sm);
  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(var(--module-rgb), 0.13),
      transparent 62%
    ),
    rgba(10, 15, 30, 0.95);
  color: rgb(var(--module-rgb));
  box-shadow: 0 4px 20px rgba(var(--module-rgb), 0.12);
  animation: nodeAppear 0.42s var(--ease) forwards;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family:
    DM Mono,
    monospace;
  font-size: 11px;
  transition:
    border-color 0.8s,
    box-shadow 0.8s,
    filter 0.8s;
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
}
.canvas-node-icon {
  opacity: 0.8;
  font-size: 11px;
}
.canvas-node.cluster-clicked {
  animation: 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards nodeClusterGlow;
}
@keyframes nodeAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}
.canvas-node.is-exiting {
  animation: nodeExit 0.82s cubic-bezier(0.22, 1, 0.36, 1) var(--exit-delay, 0s)
    forwards;
}
.canvas-connector {
  --connector-rgb: 57, 232, 255;
  background: linear-gradient(
    90deg,
    rgba(var(--connector-rgb), 0.52),
    rgba(var(--connector-rgb), 0.12)
  );
  transform-origin: 0;
  pointer-events: none;
  height: 1px;
  animation: connAppear 0.3s var(--ease) forwards;
  z-index: 1;
  position: absolute;
}
@keyframes nodeClusterGlow {
  0% {
    filter: brightness();
    border-color: rgba(var(--module-rgb), 0.38);
    box-shadow: 0 4px 20px rgba(var(--module-rgb), 0.12);
  }
  to {
    filter: brightness(1.12);
    border-color: rgba(var(--module-rgb), 0.58);
    box-shadow:
      0 4px 24px rgba(var(--module-rgb), 0.22),
      0 0 24px rgba(0, 255, 153, 0.18),
      0 0 44px rgba(0, 255, 153, 0.1);
  }
}
@keyframes connAppear {
  0% {
    opacity: 0;
    transform: rotate(var(--rot, 0deg)) scaleX(0);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rot, 0deg)) scaleX(1);
  }
}
.canvas-connector.is-exiting {
  animation: connExit 0.68s var(--ease) var(--exit-delay, 0s) forwards;
}
@keyframes nodeExit {
  0% {
    opacity: 1;
    filter: blur();
    transform: translate(-50%, -50%) scale(1);
  }
  46% {
    opacity: 0.76;
    filter: blur(0.3px);
    transform: translate(
        calc(-50% + var(--exit-x-mid, 0px)),
        calc(-50% + var(--exit-y-mid, 0px))
      )
      scale(0.96);
  }
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translate(
        calc(-50% + var(--exit-x, 0px)),
        calc(-50% + var(--exit-y, 0px))
      )
      scale(0.82);
  }
}
@keyframes connExit {
  0% {
    opacity: 1;
    transform: rotate(var(--rot, 0deg)) scaleX(1);
  }
  to {
    opacity: 0;
    transform: rotate(var(--rot, 0deg)) scaleX(0);
  }
}
@keyframes shelfFileRestore {
  0% {
    opacity: 0.4;
    border-color: var(--line);
    transform: translate(0);
  }
  54% {
    opacity: 0.72;
    border-color: rgba(57, 232, 255, 0.28);
    transform: translate(2px);
  }
  to {
    opacity: 1;
    border-color: var(--line);
    transform: translate(0);
  }
}
@media (max-width: 640px) {
  .module-board {
    grid-template-columns: 1fr;
  }
  .module-shelf {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .module-canvas {
    min-height: 200px;
  }
}
.process-steps {
  gap: var(--space-grid);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  position: relative;
}
.process-steps:before {
  content: none;
}
.process-step:not(:last-child):after {
  content: "";
  top: calc(var(--space-card-standard-y) + 30px);
  width: var(--space-grid);
  background: linear-gradient(90deg, var(--line-s), rgba(57, 232, 255, 0));
  opacity: 0;
  transform-origin: 0;
  height: 1px;
  position: absolute;
  left: 100%;
  transform: scaleX(0);
}
.process-steps.process-animate .process-step:not(:last-child):after {
  animation: processLineGrow 0.7s var(--ease) forwards;
  animation-delay: inherit;
}
.process-step {
  text-align: center;
  padding: var(--space-card-standard-y) var(--space-card-standard-x);
  border: 1px solid var(--line);
  border-radius: var(--rx-lg);
  transition:
    border-color 0.22s,
    transform 0.22s var(--ease);
  z-index: 1;
  background: rgba(10, 15, 30, 0.5);
  flex-direction: column;
  align-items: center;
  gap: 16px;
  display: flex;
  position: relative;
}
.process-steps.process-animate .process-step {
  animation: processStepIn 0.55s var(--ease) both;
}
.process-steps.process-animate .process-step:first-child {
  animation-delay: 50ms;
}
.process-steps.process-animate .process-step:nth-child(2) {
  animation-delay: 0.38s;
}
.process-steps.process-animate .process-step:nth-child(3) {
  animation-delay: 0.72s;
}
.process-steps.process-animate .process-step:nth-child(4) {
  animation-delay: 1.06s;
}
.process-step:hover {
  border-color: rgba(57, 232, 255, 0.3);
  transform: translateY(-6px);
}
.process-step-num {
  color: var(--cyan);
  background: var(--bg2);
  letter-spacing: 0.08em;
  border: 1px solid rgba(57, 232, 255, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  font-family:
    DM Mono,
    monospace;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translate(-50%);
}
.process-step-icon {
  border: 1px solid var(--line-s);
  width: 60px;
  height: 60px;
  color: var(--cyan);
  background: rgba(57, 232, 255, 0.06);
  border-radius: 50%;
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  display: grid;
}
.process-step-icon.icon-active {
  animation: processIconPulse 0.8s var(--ease) both;
}
.process-step-icon svg {
  width: 28px;
  height: 28px;
}
.process-step h3 {
  font-size: 15px;
  font-weight: 600;
}
.process-step p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
@keyframes processLineGrow {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  20% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes processStepIn {
  0% {
    opacity: 0;
    transform: translate(-22px) translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(0) translateY(0) scale(1);
  }
}
@keyframes processIconPulse {
  0% {
    transform: scale(0.94);
    box-shadow: 0 0 rgba(57, 232, 255, 0);
  }
  45% {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(57, 232, 255, 0.08);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 rgba(57, 232, 255, 0);
  }
}
@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-step:after {
    display: none;
  }
}
@media (max-width: 500px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}
.stack-grid {
  gap: var(--space-grid);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}
.stack-cat--full {
  grid-column: 1/-1;
}
.stack-cat {
  border-radius: var(--rx-lg);
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1200px;
  transform-style: preserve-3d;
  outline: none;
  padding: 0;
  display: block;
}
.stack-grid.is-visible .stack-cat {
  animation: 0.74s cubic-bezier(0.16, 1, 0.3, 1) both stackCardIn;
}
.stack-grid.is-visible .stack-cat:first-child {
  animation-delay: 40ms;
}
.stack-grid.is-visible .stack-cat:nth-child(2) {
  animation-delay: 0.3s;
}
.stack-grid.is-visible .stack-cat:nth-child(3) {
  animation-delay: 0.56s;
}
.stack-grid.is-visible .stack-cat:nth-child(4) {
  animation-delay: 0.82s;
}
.stack-grid.is-visible .stack-cat:nth-child(5) {
  animation-delay: 1.08s;
}
.stack-card-inner {
  min-height: 224px;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
}
.stack-cat--full .stack-card-inner {
  min-height: 156px;
}
.stack-card-face {
  padding: var(--space-card-standard-y) var(--space-card-standard-x);
  border: 1px solid var(--line);
  border-radius: var(--rx-lg);
  backface-visibility: hidden;
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(57, 232, 255, 0.08),
      transparent 36%
    ),
    rgba(10, 15, 30, 0.5);
  flex-direction: column;
  grid-area: 1/1;
  justify-content: center;
  transition:
    border-color 0.22s,
    box-shadow 0.22s,
    background 0.22s;
  display: flex;
}
.stack-card-back {
  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(0, 255, 153, 0.13),
      transparent 38%
    ),
    radial-gradient(
      circle at 78% 75%,
      rgba(192, 132, 252, 0.12),
      transparent 38%
    ),
    rgba(8, 13, 25, 0.82);
  justify-content: center;
  min-height: 100%;
  transform: rotateY(180deg);
}
.stack-cat:hover .stack-card-face {
  border-color: rgba(57, 232, 255, 0.24);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.04);
}
.stack-cat:focus-visible .stack-card-face {
  border-color: rgba(57, 232, 255, 0.24);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.04);
}
.stack-cat:focus-visible .stack-card-face {
  outline-offset: 4px;
  outline: 2px solid rgba(57, 232, 255, 0.55);
}
.stack-cat.is-flipped .stack-card-inner {
  transform: rotateY(180deg);
}
.stack-back-kicker {
  width: max-content;
  max-width: 100%;
  color: var(--cyan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(57, 232, 255, 0.24);
  border-radius: 999px;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-family:
    DM Mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 10px;
  font-weight: 700;
}
.section-label,
.hero-eyebrow,
.redact-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.stack-card-back h3 {
  max-width: 520px;
  color: var(--ink);
  font-size: max(22px, min(3vw, 36px));
  line-height: 1.04;
}
.stack-card-back p {
  max-width: 560px;
  color: var(--muted);
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
}
.stack-cat:not(.stack-cat--full) .stack-card-back h3 {
  font-size: max(20px, min(2.2vw, 27px));
}
.stack-cat:not(.stack-cat--full) .stack-card-back p {
  font-size: 14px;
}
.stack-cat-header {
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}
.stack-cat-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}
.stack-grid.is-visible .stack-cat-dot {
  animation: 0.86s linear both stackDotWake;
}
.stack-grid.is-visible .stack-cat:first-child .stack-cat-dot {
  animation-delay: 1.04s;
}
.stack-grid.is-visible .stack-cat:nth-child(2) .stack-cat-dot {
  animation-delay: 1.3s;
}
.stack-grid.is-visible .stack-cat:nth-child(3) .stack-cat-dot {
  animation-delay: 1.56s;
}
.stack-grid.is-visible .stack-cat:nth-child(4) .stack-cat-dot {
  animation-delay: 1.82s;
}
.stack-grid.is-visible .stack-cat:nth-child(5) .stack-cat-dot {
  animation-delay: 2.08s;
}
.stack-cat-dot--cyan {
  --stack-dot-color: var(--cyan);
  --stack-dot-glow: rgba(57, 232, 255, 0.75);
  background: var(--stack-dot-color);
  box-shadow: 0 0 8px var(--stack-dot-color);
}
.stack-cat-dot--green {
  --stack-dot-color: var(--green);
  --stack-dot-glow: rgba(0, 255, 153, 0.75);
  background: var(--stack-dot-color);
  box-shadow: 0 0 8px var(--stack-dot-color);
}
.stack-cat-dot--pink {
  --stack-dot-color: var(--pink);
  --stack-dot-glow: rgba(192, 132, 252, 0.75);
  background: var(--stack-dot-color);
  box-shadow: 0 0 8px var(--stack-dot-color);
}
.stack-cat-dot--purple {
  --stack-dot-color: var(--purple);
  --stack-dot-glow: rgba(168, 85, 247, 0.75);
  background: var(--stack-dot-color);
  box-shadow: 0 0 8px var(--stack-dot-color);
}
.stack-cat-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.stack-chips {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}
.stack-chips span {
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  transition:
    color 0.18s,
    border-color 0.18s,
    background 0.18s;
  transform: translateY(12px) scale(0.94);
}
.stack-cat.chips-active .stack-chips span {
  animation: 0.56s cubic-bezier(0.16, 1, 0.3, 1) both chipDistribute;
  animation-delay: var(--chip-delay, 0s);
}
.stack-chips span:hover {
  color: var(--ink);
  background: rgba(57, 232, 255, 0.05);
  border-color: rgba(57, 232, 255, 0.3);
}
@keyframes stackCardIn {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(22px) scale(0.975);
  }
  72% {
    opacity: 1;
    filter: blur();
  }
  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0) scale(1);
  }
}
@keyframes stackDotWake {
  0% {
    opacity: 0.38;
    box-shadow: 0 0 10px var(--stack-dot-color);
    transform: scale(0.62);
  }
  12%,
  26%,
  40% {
    opacity: 1;
    box-shadow:
      0 0 14px var(--stack-dot-color),
      0 0 28px var(--stack-dot-glow);
    transform: scale(1.2);
  }
  19%,
  33% {
    opacity: 0.62;
    box-shadow: 0 0 12px var(--stack-dot-glow);
    transform: scale(0.9);
  }
  58% {
    opacity: 1;
    box-shadow:
      0 0 18px var(--stack-dot-color),
      0 0 34px var(--stack-dot-glow);
    transform: scale(1.26);
  }
  to {
    opacity: 1;
    box-shadow:
      0 0 10px var(--stack-dot-color),
      0 0 18px var(--stack-dot-glow);
    transform: scale(1);
  }
}
@keyframes chipDistribute {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(11px) scale(0.92);
  }
  70% {
    opacity: 1;
    filter: blur();
  }
  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 640px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }
  .stack-cat--full {
    grid-column: 1;
  }
  .stack-card-inner,
  .stack-cat--full .stack-card-inner {
    min-height: 238px;
  }
  .stack-card-back h3,
  .stack-cat:not(.stack-cat--full) .stack-card-back h3 {
    font-size: 22px;
  }
  .stack-card-back p,
  .stack-cat:not(.stack-cat--full) .stack-card-back p {
    font-size: 14px;
  }
}
.cv-timeline {
  gap: var(--space-grid);
  flex-direction: column;
  max-width: 836px;
  margin: 0 auto;
  display: flex;
}
.cv-block {
  gap: var(--space-grid);
  grid-template-columns: 3px 1fr;
  align-items: start;
  display: grid;
}
.cv-block-accent {
  background: linear-gradient(180deg, var(--cyan), var(--green));
  border-radius: 999px;
  align-self: stretch;
  width: 3px;
  min-height: 80px;
}
.cv-block-content {
  padding: var(--space-card-standard-y) var(--space-card-standard-x);
  border: 1px solid var(--line);
  border-radius: var(--rx-lg);
  background: rgba(10, 15, 30, 0.5);
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
  transition: border-color 0.22s;
  display: grid;
}
.cv-block-content:hover {
  border-color: rgba(57, 232, 255, 0.25);
}
.cv-glyph {
  width: 44px;
  height: 44px;
  color: var(--cyan);
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(57, 232, 255, 0.18),
      transparent 58%
    ),
    rgba(57, 232, 255, 0.043);
  border: 1px solid rgba(57, 232, 255, 0.2);
  border-radius: 14px;
  grid-row: 1 / span 3;
  align-items: center;
  justify-items: center;
  display: grid;
  box-shadow: 0 0 24px rgba(57, 232, 255, 0.09);
}
.cv-glyph--review {
  color: var(--green);
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(0, 255, 153, 0.17),
      transparent 58%
    ),
    rgba(0, 255, 153, 0.043);
  border-color: rgba(0, 255, 153, 0.2);
  box-shadow: 0 0 24px rgba(0, 255, 153, 0.08);
}
.cv-glyph--tools {
  color: var(--purple);
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(168, 85, 247, 0.18),
      transparent 58%
    ),
    rgba(168, 85, 247, 0.043);
  border-color: rgba(168, 85, 247, 0.22);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.08);
}
.cv-glyph svg {
  width: 27px;
  height: 27px;
}
.cv-glyph,
.cv-block-meta,
.cv-block-content p,
.cv-tags {
  opacity: 0;
  transform: translateY(10px);
}
.cv-block.is-visible .cv-glyph,
.cv-block.is-visible .cv-block-meta,
.cv-block.is-visible .cv-block-content p,
.cv-block.is-visible .cv-tags {
  animation: 0.62s cubic-bezier(0.16, 1, 0.3, 1) both cvCopyIn;
}
.cv-block.is-visible .cv-glyph {
  animation-delay: 80ms;
}
.cv-block.is-visible .cv-block-meta {
  animation-delay: 0.15s;
}
.cv-block.is-visible .cv-block-content p {
  animation-delay: 0.24s;
}
.cv-block.is-visible .cv-tags {
  animation-delay: 0.36s;
}
.cv-block-meta {
  flex-wrap: wrap;
  grid-column: 2;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}
.cv-role {
  font-family:
    Clash Display,
    ui-sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.cv-period {
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-family:
    DM Mono,
    monospace;
  font-size: 12px;
}
.cv-block-content p {
  color: var(--muted);
  grid-column: 2;
  margin-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.65;
}
.cv-tags {
  flex-wrap: wrap;
  grid-column: 2;
  gap: 6px;
  display: flex;
}
.cv-tags span {
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}
@keyframes cvCopyIn {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(12px) scale(0.985);
  }
  70% {
    opacity: 1;
    filter: blur();
  }
  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 640px) {
  .cv-block {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cv-block-accent {
    display: none;
  }
  .cv-block-content {
    grid-template-columns: 1fr;
  }
  .cv-glyph,
  .cv-block-meta,
  .cv-block-content p,
  .cv-tags {
    grid-column: 1;
  }
  .cv-glyph {
    grid-row: auto;
    margin-bottom: 4px;
  }
}
.contact-section {
  padding-bottom: var(--space-section-tight);
}
.contact-card {
  padding: var(--space-card-large-y) var(--space-card-large-x);
  border: 1px solid var(--line-s);
  border-radius: var(--rx-xl);
  background: rgba(10, 15, 30, 0.7);
  position: relative;
  overflow: hidden;
}
.contact-glow {
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(at 30% 60%, rgba(57, 232, 255, 0.12), transparent 50%),
    radial-gradient(at 70% 40%, rgba(0, 255, 153, 0.1), transparent 50%);
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -40%;
  right: -40%;
}
.contact-content {
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  display: flex;
  position: relative;
}
.contact-layout {
  z-index: 1;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: max(32px, min(6vw, 78px));
  display: grid;
  position: relative;
}
.contact-content h2 {
  font-size: max(26px, min(4vw, 46px));
  position: relative;
}
.contact-card.is-visible .contact-content h2 {
  animation: 2.05s cubic-bezier(0.19, 1, 0.22, 1) 1s both ctaHeadlineFlash;
}
@keyframes ctaHeadlineFlash {
  0% {
    color: var(--ink);
    text-shadow: none;
    filter: none;
    transform: translateZ(0) scale(1);
  }
  10% {
    color: #f8fcff;
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.58),
      0 0 18px rgba(57, 232, 255, 0.46);
    filter: drop-shadow(0 0 8px rgba(57, 232, 255, 0.34));
    transform: translateZ(0) scale(1.003);
  }
  18% {
    color: #fff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.95),
      0 0 28px rgba(57, 232, 255, 0.95),
      0 0 58px rgba(0, 255, 153, 0.7),
      0 0 96px rgba(168, 85, 247, 0.42);
    filter: drop-shadow(0 0 22px rgba(57, 232, 255, 0.8));
    transform: translateZ(0) scale(1.012);
  }
  32% {
    color: #f7fbff;
    text-shadow:
      0 0 7px rgba(255, 255, 255, 0.74),
      0 0 22px rgba(57, 232, 255, 0.72),
      0 0 48px rgba(0, 255, 153, 0.48);
    filter: drop-shadow(0 0 14px rgba(0, 255, 153, 0.55));
    transform: translateZ(0) scale(1.006);
  }
  58% {
    color: var(--ink);
    text-shadow:
      0 0 3px rgba(255, 255, 255, 0.32),
      0 0 14px rgba(57, 232, 255, 0.24);
    filter: drop-shadow(0 0 6px rgba(57, 232, 255, 0.22));
    transform: translateZ(0) scale(1.001);
  }
  to {
    color: var(--ink);
    text-shadow: none;
    filter: none;
    transform: translateZ(0) scale(1);
  }
}
.contact-content p {
  color: var(--muted);
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
}
.contact-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 4px;
  display: flex;
}
.contact-email {
  color: rgba(57, 232, 255, 0.68);
  letter-spacing: 0.04em;
  align-items: center;
  min-height: 1.4em;
  font-family:
    DM Mono,
    monospace;
  font-size: 14px;
  display: inline-flex;
}
.contact-email a {
  color: inherit;
  align-items: center;
  text-decoration: none;
  transition:
    color 0.18s,
    opacity 0.18s;
  display: inline-flex;
}
.contact-email a:hover {
  color: rgba(57, 232, 255, 0.92);
}
.contact-email span {
  white-space: nowrap;
  width: 0;
  max-width: 21ch;
  display: inline-block;
  overflow: hidden;
}
.contact-email:after {
  content: "";
  opacity: 0;
  background: currentColor;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  box-shadow: 0 0 10px;
}
.contact-card.is-visible .contact-email span {
  animation: 1.9s steps(21, end) 0.46s both contactEmailType;
}
.contact-card.is-visible .contact-email:after {
  animation:
    10ms linear 0.46s both contactCursorShow,
    0.9s step-end 2.36s infinite contactCursorBlink;
}
.contact-portrait {
  --avatar-size: clamp(214px, 27.6vw, 300px);
  --aura-size: clamp(300px, 39.6vw, 420px);
  --aura-core-size: clamp(264px, 34.8vw, 365px);
  width: var(--avatar-size);
  height: var(--avatar-size);
  isolation: isolate;
  border-radius: 50%;
  justify-self: center;
  align-items: center;
  justify-items: center;
  display: grid;
  position: relative;
}
.contact-portrait:before,
.contact-portrait:after {
  content: "";
  width: var(--aura-size);
  height: var(--aura-size);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.contact-portrait:before {
  z-index: 0;
  filter: blur(18px) saturate(1.35);
  opacity: 0.74;
  background:
    radial-gradient(
      circle at 28% 30%,
      rgba(57, 232, 255, 0.45),
      transparent 24%
    ),
    radial-gradient(
      circle at 68% 22%,
      rgba(0, 255, 153, 0.32),
      transparent 27%
    ),
    radial-gradient(
      circle at 72% 76%,
      rgba(192, 132, 252, 0.34),
      transparent 30%
    ),
    radial-gradient(
      circle at 24% 72%,
      rgba(168, 85, 247, 0.28),
      transparent 32%
    );
  animation: 13s ease-in-out infinite alternate avatarAurora;
  transform: scale(0.92);
}
.contact-portrait:after {
  z-index: 1;
  width: var(--aura-core-size);
  height: var(--aura-core-size);
  filter: blur(10px);
  opacity: 0.55;
  background:
    radial-gradient(
      circle,
      rgba(7, 10, 22, 0.06) 0,
      rgba(7, 10, 22, 0.06) 42%,
      rgba(7, 10, 22, 0.72) 70%,
      transparent 73%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.14),
      transparent 32%
    );
}
.avatar-particles,
.avatar-glow,
.avatar-orbit,
.avatar-sheen {
  pointer-events: none;
  position: absolute;
}
.avatar-particles {
  z-index: 2;
  width: var(--aura-size);
  height: var(--aura-size);
  mix-blend-mode: screen;
  opacity: 0.88;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.avatar-glow {
  width: var(--aura-size);
  height: var(--aura-size);
  z-index: 2;
  mix-blend-mode: screen;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.avatar-glow-a {
  background: conic-gradient(
    from 120deg,
    transparent 0 11%,
    rgba(57, 232, 255, 0.42) 17%,
    transparent 25% 39%,
    rgba(0, 255, 153, 0.34) 48%,
    transparent 58% 72%,
    rgba(192, 132, 252, 0.32) 81%,
    transparent 92% 100%
  );
  filter: blur(13px);
  opacity: 0.58;
  animation: 18s linear infinite avatarSpin;
}
.avatar-glow-b {
  width: calc(var(--avatar-size) * 1.16);
  height: calc(var(--avatar-size) * 1.16);
  filter: blur(16px);
  opacity: 0.46;
  background:
    radial-gradient(at 45% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
    conic-gradient(
      from 260deg,
      rgba(192, 132, 252, 0.22),
      transparent 24%,
      rgba(57, 232, 255, 0.28),
      transparent 58%,
      rgba(0, 255, 153, 0.24),
      transparent 100%
    );
  animation: 9s ease-in-out infinite alternate avatarDrift;
}
.avatar-orbit {
  z-index: 3;
  opacity: 0.82;
  transform-origin: 50%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.avatar-orbit-a {
  width: calc(var(--avatar-size) * 1.23);
  height: calc(var(--avatar-size) * 1.23);
  background: conic-gradient(
    from 0deg,
    transparent 0 17%,
    rgba(57, 232, 255, 0.82) 20%,
    transparent 25% 47%,
    rgba(0, 255, 153, 0.62) 51%,
    transparent 56% 78%,
    rgba(192, 132, 252, 0.74) 82%,
    transparent 88% 100%
  );
  filter: drop-shadow(0 0 9px rgba(57, 232, 255, 0.45));
  animation: 12s linear infinite avatarSpin;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1px)
  );
}
.avatar-orbit-b {
  width: calc(var(--avatar-size) * 1.23);
  height: calc(var(--avatar-size) * 1.23);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: 7s ease-in-out infinite alternate avatarTilt;
  transform: rotateX(62deg) rotate(-12deg);
  box-shadow:
    0 0 22px rgba(57, 232, 255, 0.2),
    inset 0 0 18px rgba(192, 132, 252, 0.08);
}
.avatar-sheen {
  z-index: 5;
  width: var(--avatar-size);
  height: var(--avatar-size);
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.92),
    transparent 23% 64%,
    rgba(57, 232, 255, 0.9)
  );
  mix-blend-mode: normal;
  opacity: 1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  animation: avatarSheenRotate 5s linear infinite;
  will-change: transform;
}
@keyframes avatarSheenRotate {
  to {
    transform: rotate(360deg);
  }
}
.avatar-photo-shell {
  z-index: 4;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(57, 232, 255, 0.25),
    0 0 0 10px rgba(57, 232, 255, 0.043),
    0 30px 90px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(57, 232, 255, 0.16);
}
.cta-avatar {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes avatarSpin {
  to {
    rotate: 360deg;
  }
}
@keyframes avatarAurora {
  0% {
    opacity: 0.64;
    transform: scale(0.9) rotate(-8deg);
  }
  to {
    opacity: 0.86;
    transform: scale(1.02) rotate(8deg);
  }
}
@keyframes avatarDrift {
  0% {
    transform: translate(-4px, 6px) scale(0.98);
  }
  to {
    transform: translate(6px, -4px) scale(1.04);
  }
}
@keyframes avatarTilt {
  0% {
    transform: rotateX(62deg) rotate(-12deg) scale(0.98);
  }
  to {
    transform: rotateX(58deg) rotate(16deg) scale(1.03);
  }
}
@keyframes contactEmailType {
  0% {
    width: 0;
  }
  to {
    width: 21ch;
  }
}
@keyframes contactCursorShow {
  to {
    opacity: 1;
  }
}
@keyframes contactCursorBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  to {
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .contact-card {
    text-align: center;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-content {
    align-items: center;
  }
  .contact-actions {
    justify-content: center;
  }
}
.rq-anim-dash .redacted-dash-header {
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  display: flex;
}
.rq-timer-wrap {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}
.rq-timer-track {
  background: rgba(57, 232, 255, 0.1);
  border-radius: 999px;
  width: 72px;
  height: 2px;
  overflow: hidden;
}
.rq-timer-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  width: 0%;
  height: 100%;
  transition: width 50ms linear;
}
.rq-split-body {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 280px;
  display: grid;
  position: relative;
}
.rq-cursor {
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform-origin: 4px 2px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 12px rgba(57, 232, 255, 0.18));
  width: 28px;
  height: 40px;
  margin-top: -2px;
  margin-left: -4px;
  transition: opacity 0.2s;
  position: absolute;
}
.rq-panel {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  position: relative;
}
.rq-panel--chaos {
  background: radial-gradient(
    at 20% 0,
    rgba(255, 77, 106, 0.04),
    transparent 55%
  );
}
.rq-panel--flow {
  background: radial-gradient(
    at 80% 0,
    rgba(0, 255, 153, 0.04),
    transparent 55%
  );
}
.rq-panel-head {
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  display: flex;
}
.rq-panel-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 9px;
  font-family:
    DM Mono,
    monospace;
  font-size: 9px;
  font-weight: 500;
}
.rq-panel-label--chaos {
  color: rgba(255, 77, 106, 0.8);
  background: rgba(255, 77, 106, 0.06);
  border: 1px solid rgba(255, 77, 106, 0.22);
}
.rq-panel-label--flow {
  color: rgba(0, 255, 153, 0.85);
  background: rgba(0, 255, 153, 0.05);
  border: 1px solid rgba(0, 255, 153, 0.22);
}
.rq-panel-title {
  min-width: 0;
  color: var(--dim);
  letter-spacing: 0.02em;
  font-family:
    DM Mono,
    monospace;
  font-size: 11px;
}
.rq-panel-rows {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.rq-row {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  display: flex;
  position: relative;
}
.rq-row .redact-copy strong {
  font-size: 12px;
}
.rq-row .redact-copy span {
  font-size: 10.5px;
}
.rq-row .redact-progress {
  margin-top: 7px;
}
.rq-panel--flow #fr3 {
  height: 74px;
  min-height: 74px;
}
.rq-panel--flow #fr3 .redact-copy {
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  display: flex;
}
.rq-row-icon {
  letter-spacing: 0.02em;
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-family:
    DM Mono,
    monospace;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}
.rq-row-icon--muted {
  color: var(--muted);
  background: rgba(61, 78, 110, 0.25);
}
.rq-row-icon--warn {
  color: #ff9f43;
  background: rgba(255, 159, 67, 0.1);
}
.rq-row-icon--dim {
  color: var(--dim);
  background: rgba(61, 78, 110, 0.15);
}
.rq-row-icon--red {
  color: #ff4d6a;
  background: rgba(255, 77, 106, 0.1);
}
.rq-row-icon--cyan {
  color: var(--cyan);
  background: rgba(57, 232, 255, 0.1);
}
.rq-row-icon--purple {
  color: var(--purple);
  background: rgba(168, 85, 247, 0.12);
}
.rq-row-icon--green {
  color: var(--green);
  background: rgba(0, 255, 153, 0.1);
}
.rq-row-flash {
  z-index: 2;
  border-radius: var(--rx-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.rq-row-flash--red {
  background: rgba(255, 77, 106, 0.1);
  border: 1px solid rgba(255, 77, 106, 0.45);
}
.rq-row-flash--green {
  background: rgba(0, 255, 153, 0.07);
  border: 1px solid rgba(0, 255, 153, 0.35);
}
.rq-type-field {
  background: rgba(6, 10, 18, 0.7);
  border: 1px solid rgba(57, 232, 255, 0.1);
  border-radius: 5px;
  align-items: center;
  gap: 1px;
  min-height: 22px;
  margin-top: 6px;
  padding: 4px 8px;
  font-family:
    DM Mono,
    monospace;
  font-size: 10.5px;
  display: flex;
}
.rq-type-field.field-error {
  border-color: rgba(255, 77, 106, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 77, 106, 0.1);
}
.rq-type-key {
  color: var(--cyan);
}
.rq-type-sep {
  color: var(--dim);
  margin: 0 2px;
}
.rq-type-caret {
  background: var(--cyan);
  opacity: 0;
  width: 1.5px;
  height: 11px;
  margin-left: 1px;
  animation: 0.85s step-end infinite rqBlink;
  display: inline-block;
}
@keyframes rqBlink {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.rq-progress-red i {
  background: linear-gradient(90deg, #ff4d6a, #ff9f43) !important;
}
.rq-thinking {
  visibility: hidden;
  align-items: center;
  gap: 4px;
  height: 4px;
  margin-top: 6px;
  display: flex;
}
.rq-thinking.visible {
  visibility: visible;
}
.rq-thinking span {
  background: var(--purple);
  opacity: 0;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 1.1s ease-in-out infinite rqDot;
}
.rq-thinking span:nth-child(2) {
  animation-delay: 0.18s;
}
.rq-thinking span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes rqDot {
  0%,
  80%,
  to {
    opacity: 0;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
.rq-divider {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 1px;
  padding: 16px 0;
  display: flex;
  position: relative;
}
.rq-divider-line {
  background: linear-gradient(
    transparent,
    rgba(57, 232, 255, 0.18) 30%,
    rgba(57, 232, 255, 0.18) 70%,
    transparent
  );
  flex: 1;
  width: 1px;
}
.rq-divider-vs {
  color: var(--dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  padding: 6px 0;
  font-family:
    DM Mono,
    monospace;
  font-size: 9px;
  transform: rotate(180deg);
}
.rq-approve-stamp {
  z-index: 20;
  border: 1.5px solid var(--green);
  border-radius: var(--rx-md);
  color: var(--green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  background: rgba(0, 255, 153, 0.08);
  padding: 9px 22px;
  font-family:
    Clash Display,
    DM Sans,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-6deg);
  box-shadow: 0 0 32px rgba(0, 255, 153, 0.15);
}
.rq-approve-stamp.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-4deg);
}
.rq-row.rq-lit {
  background: rgba(57, 232, 255, 0.04) !important;
  border-color: rgba(57, 232, 255, 0.22) !important;
}
.rq-row.rq-done-green {
  background: rgba(0, 255, 153, 0.03) !important;
  border-color: rgba(0, 255, 153, 0.2) !important;
}
.rq-row.rq-done-purple {
  background: rgba(168, 85, 247, 0.03) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}
.rq-row.rq-error {
  background: rgba(255, 77, 106, 0.05) !important;
  border-color: rgba(255, 77, 106, 0.35) !important;
}
@keyframes rqGlitch {
  0%,
  to {
    filter: none;
    transform: none;
  }
  30% {
    filter: hue-rotate(15deg);
    transform: translate(-2px);
  }
  60% {
    filter: hue-rotate(-10deg);
    transform: translate(2px);
  }
  90% {
    transform: none;
  }
}
.rq-glitch {
  animation: 0.35s both rqGlitch;
}
#rqAnimDash[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 640px) {
  .rq-split-body {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }
  .rq-divider {
    flex-direction: row;
    width: 100%;
    height: 1px;
    padding: 0 16px;
  }
  .rq-divider-line {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(57, 232, 255, 0.18) 30%,
      rgba(57, 232, 255, 0.18) 70%,
      transparent
    );
    width: auto;
    height: 1px;
  }
  .rq-divider-vs {
    writing-mode: horizontal-tb;
    padding: 0 8px;
    transform: none;
  }
  .rq-cursor {
    display: none;
  }
}
.site-footer {
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: 28px 0;
  position: relative;
}
.site-footer .inner {
  color: var(--dim);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  display: grid;
}
.footer-name {
  grid-column: 1;
  justify-self: start;
}
.footer-email {
  text-align: center;
  grid-column: 2;
  justify-self: center;
}
.site-footer a {
  color: var(--cyan);
  opacity: 0.5;
  transition: opacity 0.18s;
}
.site-footer a:hover {
  opacity: 0.75;
}
.footer-note {
  letter-spacing: 0.08em;
  grid-column: 3;
  justify-self: end;
  font-style: normal;
}
@media (max-width: 640px) {
  .site-footer .inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .footer-name,
  .footer-email,
  .footer-note {
    grid-column: auto;
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .metrics-band .metric-card,
  .metrics-band .metric-divider,
  .origin-loop-item,
  .flow-diagram .flow-node,
  .flow-diagram .flow-arrow,
  .stack-cat-dot,
  .stack-chips span {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
.nav:before {
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
@media (max-width: 800px) {
  .nav-links {
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
  }
}

/* =====================================================
   Light mode — token overrides (prefers-color-scheme)
   ===================================================== */
@media (prefers-color-scheme: light) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --bg: rgb(236, 238, 242);
    --bg2: rgb(244, 245, 248);
    --bg3: rgb(252, 252, 253);
    --ink: rgb(14, 22, 38);
    --muted: rgb(82, 93, 112);
    --dim: rgb(148, 156, 170);
    --line: rgba(77, 146, 255, 0.1);
    --line-s: rgba(77, 146, 255, 0.22);
    --glass: rgba(255, 255, 255, 0.72);
    --cyan: #4d92ff;
    --green: rgb(5, 150, 105);
    --pink: rgb(139, 92, 246);
    --purple: rgb(124, 58, 237);
    --cyan-glow: rgba(77, 146, 255, 0.18);
    --green-glow: rgba(5, 150, 105, 0.15);
    --pink-glow: rgba(124, 58, 237, 0.15);
    --max: 1200px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --rx-xl: 32px;
    --rx-lg: 22px;
    --rx-md: 14px;
    --rx-sm: 8px;
    --site-gutter: 24px;
    --space-section: clamp(80px, 8.5vw, 120px);
    --space-section-tight: clamp(56px, 6vw, 88px);
    --space-section-compact: clamp(40px, 4.5vw, 64px);
    --space-header-content: 48px;
    --space-card-large-y: 64px;
    --space-card-large-x: 64px;
    --space-card-standard-y: 28px;
    --space-card-standard-x: 24px;
    --space-grid: 24px;
  }
  @media (max-width: 980px) {
    :root {
      --space-header-content: 40px;
      --space-card-large-y: 48px;
      --space-card-large-x: 48px;
      --space-grid: 20px;
    }
  }
  @media (max-width: 640px) {
    :root {
      --space-header-content: 32px;
      --space-card-large-y: 40px;
      --space-card-large-x: 24px;
      --space-card-standard-y: 24px;
      --space-card-standard-x: 24px;
      --space-grid: 16px;
    }
  }
  *,
  :before,
  :after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
  }
  body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    font-family:
      DM Sans,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Noto Sans,
      Ubuntu,
      Cantarell,
      Helvetica Neue,
      sans-serif;
    overflow-x: hidden;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button {
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: none;
  }
  ul {
    padding: 0;
    list-style: none;
  }
  .ambient {
    pointer-events: none;
    z-index: 0;
    filter: blur(90px);
    opacity: 0.5;
    border-radius: 999px;
    position: fixed;
  }
  .ambient-a {
    background: radial-gradient(
      circle,
      rgba(77, 146, 255, 0.25),
      transparent 60%
    );
    width: 700px;
    height: 700px;
    animation: 22s ease-in-out infinite alternate floatA;
    top: -100px;
    left: -200px;
  }
  .ambient-b {
    background: radial-gradient(
      circle,
      rgba(124, 58, 237, 0.18),
      transparent 60%
    );
    width: 600px;
    height: 600px;
    animation: 18s ease-in-out infinite alternate floatB;
    top: 40vh;
    right: -150px;
  }
  .ambient-c {
    background: radial-gradient(
      circle,
      rgba(5, 150, 105, 0.15),
      transparent 60%
    );
    width: 500px;
    height: 500px;
    animation: 26s ease-in-out infinite alternate-reverse floatA;
    bottom: 10vh;
    left: 40%;
  }
  .scanline {
    pointer-events: none;
    z-index: 1;
    opacity: 0.022;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(77, 146, 255, 0.4) 0,
      rgba(77, 146, 255, 0.4) 1px,
      transparent 1px,
      transparent 4px
    );
    background-size: 100% 4px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  @keyframes floatA {
    0% {
      transform: translate(0);
    }
    to {
      transform: translate(40px, 60px);
    }
  }
  @keyframes floatB {
    0% {
      transform: translate(0);
    }
    to {
      transform: translate(-50px, -40px);
    }
  }
  [data-reveal] {
    opacity: 0;
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease);
    transform: translateY(28px);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  .inner {
    width: min(var(--max), calc(100% - (var(--site-gutter) * 2)));
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .section {
    padding: var(--space-section) 0 0;
    position: relative;
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
    font-family:
      Clash Display,
      DM Sans,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Noto Sans,
      Ubuntu,
      Cantarell,
      Helvetica Neue;
    font-weight: 600;
    line-height: 1.08;
  }
  h1 {
    letter-spacing: -0.02em;
    font-size: max(36px, min(6vw, 72px));
  }
  h2 {
    letter-spacing: -0.02em;
    font-size: max(28px, min(4vw, 50px));
  }
  h3 {
    letter-spacing: -0.01em;
    font-size: max(18px, min(2.2vw, 22px));
  }
  em {
    color: var(--cyan);
    font-style: normal;
  }
  p,
  .section-sub,
  .hero-sub,
  .metric-text span {
    text-wrap: pretty;
  }
  .section-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid var(--line-s);
    background: rgba(77, 146, 255, 0.06);
    border-radius: 999px;
    margin-bottom: 12px;
    padding: 4px 12px;
    scroll-margin-top: max(112px, min(14vh, 128px));
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
  }
  .section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-header-content);
  }
  .section-sub {
    color: var(--muted);
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.6;
  }
  .btn {
    height: 48px;
    transition: all 0.22s var(--ease);
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }
  .btn-primary {
    background: linear-gradient(90deg, var(--cyan), var(--green));
    color: rgb(236, 238, 242);
    font-weight: 700;
  }
  .btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(77, 146, 255, 0.3);
  }
  .btn-glyph {
    color: rgb(236, 238, 242);
    width: 16px;
    height: 16px;
    transition:
      transform 0.22s var(--ease),
      opacity 0.22s var(--ease);
    align-items: center;
    justify-items: center;
    margin-left: -2px;
    margin-right: -5px;
    display: inline-grid;
  }
  .btn-glyph svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 16px;
    height: 16px;
    overflow: visible;
  }
  .btn-primary:hover .btn-glyph,
  .nav-cta:hover .btn-glyph {
    opacity: 0.82;
    transform: translate(2px);
  }
  .btn-ghost {
    border: 1px solid var(--line-s);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.26);
  }
  .hero-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.28);
  }
  .btn-ghost:hover {
    background: rgba(77, 146, 255, 0.1);
    border-color: rgba(77, 146, 255, 0.45);
    transform: translateY(-2px);
  }
  .linkedin-glyph {
    color: currentColor;
    opacity: 1;
    width: 16px;
    height: 16px;
    transition: transform 0.18s var(--ease);
    align-items: center;
    justify-items: center;
    display: inline-grid;
  }
  .linkedin-glyph svg {
    fill: currentColor;
    width: 15px;
    height: 15px;
    display: block;
  }
  .btn-ghost:hover .linkedin-glyph {
    transform: translateY(-1px);
  }
  .nav-wrap {
    z-index: 100;
    width: min(var(--max), calc(100% - 32px));
    margin: 14px auto 0;
    position: sticky;
    top: 14px;
  }
  .nav {
    border: 1px solid var(--line-s);
    background: 0 0;
    border-radius: 999px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: max(8px, min(1.1vw, 14px));
    min-height: 64px;
    padding: 10px 12px 10px 18px;
    display: grid;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(77, 146, 255, 0.06),
      0 24px 60px rgba(15, 23, 42, 0.2);
  }
  .nav:before {
    content: "";
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(rgba(255, 255, 255, 0.04), transparent 48%),
      radial-gradient(
        circle at 14% 18%,
        rgba(77, 146, 255, 0.055),
        transparent 44%
      ),
      rgba(255, 255, 255, 0.57);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .brand {
    z-index: 1;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    display: flex;
    position: relative;
  }
  .brand-avatar {
    filter: drop-shadow(0 0 14px rgba(77, 146, 255, 0.224))
      drop-shadow(0 0 20px rgba(5, 150, 105, 0.15));
    border-radius: 999px;
    flex-shrink: 0;
    align-items: center;
    justify-items: center;
    width: 40px;
    height: 40px;
    display: grid;
    position: relative;
  }
  .brand-avatar img {
    z-index: 1;
    object-fit: cover;
    border-radius: 999px;
    width: 92%;
    height: 92%;
    display: block;
    position: relative;
  }
  .brand-avatar--fallback .brand-avatar-fallback {
    color: var(--cyan);
    font-size: 16px;
    font-weight: 700;
    display: flex;
  }
  .brand-avatar-fallback {
    display: none;
  }
  .brand-name {
    letter-spacing: -0.01em;
    font-family:
      Clash Display,
      ui-sans-serif;
    font-size: 20.4px;
    font-weight: 600;
  }
  .brand-name sup {
    color: var(--cyan);
    vertical-align: super;
    font-family:
      DM Sans,
      ui-sans-serif;
    font-size: 12px;
  }
  .nav-links {
    z-index: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    justify-items: center;
    gap: max(10px, min(1.8vw, 28px));
    width: 100%;
    min-width: 0;
    display: grid;
    position: relative;
  }
  .nav-links a {
    color: var(--muted);
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    transition:
      color 0.18s,
      background 0.18s;
  }
  .nav-links a:not(.nav-cta) {
    text-align: center;
  }
  .nav-links a:hover {
    color: var(--ink);
    background: rgba(77, 146, 255, 0.06);
  }
  .nav-cta {
    background: linear-gradient(90deg, var(--cyan), var(--green));
    border-radius: 999px;
    justify-self: end;
    align-items: center;
    gap: 6px;
    height: 38px;
    margin-left: max(8px, min(1vw, 16px));
    padding: 0 18px;
    font-size: 14px;
    display: flex;
    box-shadow: 0 8px 24px rgba(77, 146, 255, 0.16);
    color: rgb(236, 238, 242) !important;
    font-weight: 700 !important;
    transition:
      filter 0.2s,
      transform 0.2s,
      box-shadow 0.2s !important;
  }
  .nav-cta:hover {
    filter: brightness(1.08);
    box-shadow:
      0 10px 30px rgba(77, 146, 255, 0.26),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: rgb(236, 238, 242) !important;
    background: linear-gradient(
      90deg,
      rgb(29, 78, 216),
      rgb(4, 120, 87)
    ) !important;
    transform: translateY(-1px) !important;
  }
  .nav-toggle {
    z-index: 1;
    width: 44px;
    height: 44px;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: 0 0;
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 10px;
    display: none;
    position: relative;
  }
  .nav-toggle span {
    transform-origin: 50%;
    pointer-events: none;
    width: 22px;
    height: 2px;
    transition:
      transform 0.26s var(--ease),
      opacity 0.18s ease,
      width 0.2s ease;
    background: currentColor;
    border-radius: 2px;
    display: block;
  }
  .nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.35);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  @media (max-width: 800px) {
    .nav {
      grid-template-columns: auto auto;
    }
    .nav-toggle {
      display: flex;
    }
    .nav-links {
      border: 1px solid var(--line-s);
      border-radius: var(--rx-lg);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transform-origin: top;
      isolation: isolate;
      background: rgba(255, 255, 255, 0.57);
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 14px;
      transition:
        opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.44s;
      display: flex;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      overflow: hidden;
      transform: translateY(-12px) scale(0.982);
    }
    .nav-links:before {
      content: "";
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(rgba(255, 255, 255, 0.04), transparent 48%),
        radial-gradient(
          circle at 16% 12%,
          rgba(77, 146, 255, 0.055),
          transparent 46%
        );
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .nav-links.open,
    .nav-toggle[aria-expanded="true"] + .nav-links {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition-delay: 0s;
      transform: none;
    }
    .nav-links.closing {
      opacity: 0;
      pointer-events: none;
      visibility: visible;
      transform: translateY(-12px) scale(0.982);
    }
    .nav-links a {
      z-index: 1;
      text-align: center;
      opacity: 0;
      padding: 12px;
      position: relative;
      transform: translateY(8px);
    }
    .nav-links.open a,
    .nav-toggle[aria-expanded="true"] + .nav-links a {
      animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) both navMenuItemIn;
    }
    .nav-cta {
      justify-content: center;
      margin-left: 0;
    }
  }
  @keyframes navMenuItemIn {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @supports not (
    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
  ) {
    .nav:before {
      background: rgba(255, 255, 255, 0.88);
    }
    @media (max-width: 800px) {
      .nav-links {
        background: rgba(255, 255, 255, 0.9);
      }
      .nav-links:before {
        display: none;
      }
    }
  }
  .hero {
    z-index: 2;
    width: 100%;
    min-height: max(620px, min(48vw, 760px));
    padding: clamp(30px, 4.2vh, 44px)
      max(var(--site-gutter), calc((100vw - var(--max)) / 2))
      clamp(28px, 4vh, 42px);
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.88fr);
    align-items: start;
    gap: max(18px, min(2.2vw, 36px));
    margin-left: 0;
    margin-right: 0;
    display: grid;
    position: relative;
    overflow: visible;
  }
  .anchor-alias {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    scroll-margin-top: max(112px, min(12vh, 136px));
    position: absolute;
    top: 0;
    left: 0;
  }
  .hero-dot-matrix {
    z-index: 0;
    pointer-events: none;
    opacity: 0.82;
    -webkit-mask-composite: source-in, source-in;
    background-image:
      -webkit-image-set(
        url(hero-dot-matrix-static.avif) 1x type("image/avif"),
        url(hero-dot-matrix-static.webp) 1x type("image/webp"),
        url(hero-dot-matrix-static.png) 1x type("image/png")
      ),
      -webkit-radial-gradient(
          circle,
          rgba(77, 146, 255, 0.17) 0,
          rgba(77, 146, 255, 0.17) 1px,
          transparent 1.7px
        ),
      -webkit-radial-gradient(
          circle,
          rgba(5, 150, 105, 0.1) 0,
          rgba(5, 150, 105, 0.1) 1px,
          transparent 1.6px
        );
    background-image:
      image-set(
        "hero-dot-matrix-static.avif" 1x type("image/avif"),
        "hero-dot-matrix-static.webp" 1x type("image/webp"),
        "hero-dot-matrix-static.png" 1x type("image/png")
      ),
      radial-gradient(
        circle,
        rgba(77, 146, 255, 0.17) 0,
        rgba(77, 146, 255, 0.17) 1px,
        transparent 1.7px
      ),
      radial-gradient(
        circle,
        rgba(5, 150, 105, 0.1) 0,
        rgba(5, 150, 105, 0.1) 1px,
        transparent 1.6px
      );
    background-position:
      50%,
      0 0,
      11px 11px;
    background-repeat: no-repeat, repeat, repeat;
    background-size:
      cover,
      22px 22px,
      22px 22px;
    width: 100%;
    height: 115%;
    position: absolute;
    top: -9%;
    bottom: -6%;
    left: 0;
    right: 0;
    -webkit-mask-image:
      linear-gradient(#000 0, #000 90%, transparent 100%),
      radial-gradient(
        at 55% 46%,
        #000 0,
        #000 58%,
        rgba(0, 0, 0, 0.72) 74%,
        transparent 94%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.86),
        #000 20%,
        #000 78%,
        rgba(0, 0, 0, 0.55)
      );
    mask-image:
      linear-gradient(#000 0, #000 90%, transparent 100%),
      radial-gradient(
        at 55% 46%,
        #000 0,
        #000 58%,
        rgba(0, 0, 0, 0.72) 74%,
        transparent 94%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.86),
        #000 20%,
        #000 78%,
        rgba(0, 0, 0, 0.55)
      );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
  }
  .hero-content,
  .hero-stage {
    position: relative;
  }
  .hero-content {
    z-index: 5;
    max-width: 620px;
  }
  .hero-eyebrow {
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(77, 146, 255, 0.04);
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
  }
  .eyebrow-dot {
    background: var(--green);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--green);
    border-radius: 50%;
    animation: 2s ease-in-out infinite pulse;
  }
  @keyframes pulse {
    0%,
    to {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  .hero-headline {
    margin-bottom: 24px;
    line-height: 1.06;
    overflow: visible;
  }
  .hero-line {
    display: block;
  }
  .hero-line-break {
    display: inline;
  }
  .hero-headline em {
    z-index: 0;
    color: transparent;
    white-space: nowrap;
    isolation: isolate;
    width: max-content;
    max-width: none;
    transform: scaleX(var(--hero-accent-fit-scale, 1));
    transform-origin: 0;
    background: linear-gradient(
      105deg,
      var(--cyan) 0%,
      rgb(29, 78, 216) 24%,
      var(--green) 52%,
      var(--purple) 78%,
      var(--cyan) 100%
    );
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(77, 146, 255, 0.22))
      drop-shadow(0 0 24px rgba(5, 150, 105, 0.16));
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
  }
  .hero-headline em:after {
    content: attr(data-text);
    z-index: -1;
    pointer-events: none;
    line-height: inherit;
    background: linear-gradient(
      105deg,
      var(--cyan) 0%,
      rgb(29, 78, 216) 24%,
      var(--green) 52%,
      var(--purple) 78%,
      var(--cyan) 100%
    );
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0.22;
    filter: blur(10px) saturate(1.12);
    -webkit-background-clip: text;
    background-clip: text;
    animation: 3.4s ease-in-out infinite heroTitleGlowPulse;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateZ(0) scale(1.01);
  }
  .hero-sub {
    color: var(--muted);
    max-width: 480px;
    margin-bottom: 36px;
    font-size: max(16px, min(1.8vw, 18px));
    line-height: 1.65;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
    display: flex;
  }
  .hero-tags {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 520px);
    display: grid;
  }
  .tag {
    font-size: var(--tag-fit-size, 12px);
    color: var(--dim);
    padding: 5px var(--tag-pad, 12px);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: clip;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(77, 146, 255, 0.12);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    font-weight: 500;
    transition:
      color 0.18s,
      border-color 0.18s;
    display: inline-flex;
    overflow: hidden;
  }
  .tag:first-child,
  .tag:nth-child(2),
  .tag:nth-child(3),
  .tag:nth-child(4),
  .tag:nth-child(5),
  .tag:nth-child(6) {
    grid-column: span 2;
  }
  .tag:hover {
    color: var(--cyan);
    border-color: rgba(77, 146, 255, 0.3);
  }
  .hero-stage {
    z-index: 4;
    --mx: 50%;
    --my: 50%;
    justify-self: start;
    width: min(540px, 52vw);
    position: relative;
    transform: translate(-82px, 51px);
  }
  .hero-stage.is-visible {
    transform: translate(-82px, 51px);
  }
  .mock-window {
    isolation: isolate;
    border: 1px solid var(--line-s);
    border-radius: var(--rx-lg);
    width: 100%;
    transition: transform 0.4s var(--ease);
    background:
      radial-gradient(at 18% 0, rgba(77, 146, 255, 0.12), transparent 34%),
      radial-gradient(at 84% 18%, rgba(5, 150, 105, 0.06), transparent 42%),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.28) 44%,
        rgba(255, 255, 255, 0.2) 100%
      ),
      rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: visible;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.08),
      inset 0 -1px rgba(77, 146, 255, 0.06),
      0 0 0 1px rgba(77, 146, 255, 0.08),
      0 40px 100px rgba(15, 23, 42, 0.248),
      0 0 70px rgba(77, 146, 255, 0.1);
  }
  .mock-window:before,
  .mock-window:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .mock-window:before {
    z-index: 0;
    opacity: 0.8;
    background:
      radial-gradient(at 28% -8%, rgba(255, 255, 255, 0.12), transparent 34%),
      radial-gradient(at 72% 102%, rgba(77, 146, 255, 0.12), transparent 46%);
  }
  .mock-window:after {
    z-index: 2;
    opacity: 0.42;
    background:
      linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.08),
        transparent 18%,
        transparent 72%,
        rgba(77, 146, 255, 0.05)
      ),
      linear-gradient(rgba(77, 146, 255, 0.08), transparent 18%);
  }
  .mock-window-bar,
  .mock-window-body {
    z-index: 1;
    position: relative;
  }
  .hero-stage:hover .mock-window {
    transform: perspective(1200px) rotateX(2deg) rotateY(-4deg);
  }
  .mock-window-bar {
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--rx-lg);
    border-top-right-radius: var(--rx-lg);
    background:
      linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
      rgba(0, 0, 0, 0.9);
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    display: flex;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.08),
      inset 0 -1px rgba(77, 146, 255, 0.1);
  }
  .mock-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
  }
  .mock-dot--red {
    background: #ff5f57;
  }
  .mock-dot--yellow {
    background: #ffbd2e;
  }
  .mock-dot--green {
    background: #28c840;
  }
  .mock-window-title {
    color: var(--dim);
    margin-left: 8px;
    font-family:
      DM Mono,
      Courier New,
      monospace;
    font-size: 12px;
  }
  .mock-window-body {
    grid-template-columns: minmax(118px, 26%) 1fr;
    min-height: 260px;
    display: grid;
  }
  .mock-sidebar {
    border-bottom-left-radius: var(--rx-lg);
    background:
      linear-gradient(rgba(77, 146, 255, 0.035), rgba(255, 255, 255, 0.01)),
      rgba(255, 255, 255, 0.01);
    border-right: 1px solid rgba(77, 146, 255, 0.13);
    padding: 14px 0;
    box-shadow:
      inset -1px 0 rgba(77, 146, 255, 0.08),
      inset 1px 0 rgba(255, 255, 255, 0.024);
  }
  .mock-nav-item {
    color: var(--dim);
    opacity: 0.65;
    cursor: default;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 12px;
    transition:
      background 0.18s,
      color 0.18s;
    display: flex;
  }
  .mock-nav-item .mock-icon {
    opacity: 0.7;
    font-size: 11px;
  }
  .mock-nav-item--active {
    color: var(--cyan);
    border-left: 2px solid var(--cyan);
    background: rgba(77, 146, 255, 0.02);
  }
  .mock-main {
    border-bottom-right-radius: var(--rx-lg);
    background:
      radial-gradient(at 88% 0, rgba(5, 150, 105, 0.07), transparent 42%),
      radial-gradient(at 18% 4%, rgba(77, 146, 255, 0.06), transparent 38%),
      linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.58),
        rgba(255, 255, 255, 0.46) 52%,
        rgba(255, 255, 255, 0.54)
      ),
      rgba(0, 0, 0, 0.46);
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    display: flex;
    box-shadow:
      inset 1px 0 rgba(77, 146, 255, 0.08),
      inset 0 1px rgba(255, 255, 255, 0.035);
  }
  .mock-stat-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    display: grid;
  }
  .mock-stat {
    border: 1px solid var(--line);
    border-radius: var(--rx-sm);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 42%),
      rgba(255, 255, 255, 0.42);
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    display: flex;
  }
  .mock-stat--accent {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 42%),
      rgba(5, 150, 105, 0.055);
    border-color: rgba(5, 150, 105, 0.2);
  }
  .mock-stat-val {
    color: var(--ink);
    font-family:
      Clash Display,
      ui-sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  .mock-stat--accent .mock-stat-val {
    color: var(--green);
  }
  .mock-stat-label {
    color: var(--dim);
    font-size: 10px;
  }
  .mock-pipeline {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }
  .mock-pipeline-step {
    border-radius: var(--rx-sm);
    border: 1px solid var(--line);
    min-height: 34px;
    color: var(--dim);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.024), transparent 45%),
      rgba(255, 255, 255, 0.54);
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    font-family:
      DM Mono,
      Courier New,
      monospace;
    font-size: 11px;
    display: flex;
  }
  .mock-pipeline-step--done {
    color: var(--muted);
    border-color: rgba(77, 146, 255, 0.15);
  }
  .mock-pipeline-step--active {
    color: var(--cyan);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 45%),
      rgba(77, 146, 255, 0.075);
    border-color: rgba(77, 146, 255, 0.3);
  }
  .mock-badge {
    border: 1px solid var(--line);
    width: 28px;
    height: 20px;
    color: var(--dim);
    border-radius: 999px;
    flex: 0 0 28px;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
  }
  .mock-badge--green {
    color: var(--green);
    border-color: rgba(5, 150, 105, 0.25);
  }
  .mock-badge--cyan {
    color: var(--cyan);
    border-color: rgba(77, 146, 255, 0.25);
  }
  .mock-pulse {
    animation: 1.2s ease-in-out infinite pulse;
  }
  .mock-card-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid;
  }
  .mock-mini-card {
    border: 1px solid var(--line);
    border-radius: var(--rx-sm);
    color: var(--dim);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.024), transparent 45%),
      rgba(255, 255, 255, 0.54);
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    font-size: 10px;
    display: flex;
  }
  .mock-mini-bar {
    background: linear-gradient(90deg, var(--cyan), rgba(77, 146, 255, 0.3));
    border-radius: 999px;
    height: 4px;
  }
  .mock-mini-bar--green {
    background: linear-gradient(90deg, var(--green), rgba(5, 150, 105, 0.3));
  }
  .float-card {
    border: 1px solid var(--line-s);
    color: var(--muted);
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family:
      DM Mono,
      Courier New,
      monospace;
    font-size: 12px;
    animation: 4s ease-in-out infinite alternate floatCard;
    display: flex;
    position: absolute;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
  }
  .float-card-icon {
    color: var(--cyan);
    font-size: 11px;
  }
  .float-card-status {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
  }
  .float-card-status--ok {
    color: var(--green);
    border-color: rgba(5, 150, 105, 0.3);
  }
  .float-card-status--warn {
    color: rgb(217, 119, 6);
    border-color: rgba(217, 119, 6, 0.3);
  }
  .float-card--b {
    animation-duration: 3.5s;
    animation-delay: 1.5s;
    top: -16px;
    right: -16px;
  }
  .float-card--b .float-card-icon {
    color: var(--green);
    text-shadow:
      0 0 10px rgba(5, 150, 105, 0.85),
      0 0 24px rgba(5, 150, 105, 0.58);
    animation: 1.55s ease-in-out infinite architectDiamondPulse;
  }
  @keyframes floatCard {
    0% {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10px);
    }
  }
  @keyframes architectDiamondPulse {
    0%,
    to {
      opacity: 0.78;
      filter: drop-shadow(0 0 5px rgba(5, 150, 105, 0.55));
      transform: scale(1);
    }
    48% {
      opacity: 1;
      filter: drop-shadow(0 0 16px rgba(5, 150, 105, 0.95));
      transform: scale(1.18);
    }
  }
  @keyframes heroTitleGlowPulse {
    0%,
    to {
      opacity: 0.18;
      filter: blur(9px) saturate(1.05);
      transform: translateZ(0) scale(1.006);
    }
    50% {
      opacity: 0.68;
      filter: blur(16px) saturate(1.42);
      transform: translateZ(0) scale(1.028);
    }
  }
  @media (max-width: 1100px) {
    .hero {
      min-height: auto;
      padding-bottom: max(18px, min(2.4vh, 28px));
    }
    .hero-stage,
    .hero-stage.is-visible {
      transform: translate(-96px, 58px);
    }
    .mock-window-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 190px;
      overflow: hidden;
    }
  }
  @media (max-width: 800px) {
    .hero {
      grid-template-columns: minmax(0, 1fr);
      min-height: auto;
      padding-top: max(26px, min(4.5vh, 40px));
    }
    .hero-content {
      width: 100%;
      min-width: 0;
      max-width: none;
    }
    .hero-headline {
      width: 100%;
      max-width: none;
      font-size: 52.5px;
      line-height: 1.02;
    }
    .hero-sub,
    .hero-tags {
      width: 100%;
      max-width: none;
    }
    .hero-line-break {
      display: block;
    }
    .hero-stage {
      display: none;
    }
  }
  @media (max-width: 560px) {
    .hero-headline {
      font-size: max(40px, min(9.85vw, 51.25px));
    }
    .hero-tags {
      gap: 6px;
    }
    .tag {
      --tag-pad: 7px;
      font-size: var(--tag-fit-size, 10.5px);
      letter-spacing: 0;
    }
    .tag:first-child,
    .tag:nth-child(2),
    .tag:nth-child(3),
    .tag:nth-child(4),
    .tag:nth-child(5),
    .tag:nth-child(6) {
      grid-column: span 2;
    }
  }
  @media (max-width: 500px) {
    .hero-headline {
      font-size: max(40px, min(9.85vw, 49px));
    }
  }
  @media (max-width: 460px) {
    .hero-headline {
      font-size: 44px;
    }
  }
  @media (max-width: 420px) {
    .hero-headline {
      font-size: 40px;
    }
    .hero-headline em {
      font-size: min(1em, calc((100vw - (var(--site-gutter) * 2)) / 9.12));
    }
    .tag {
      --tag-pad: 5px;
      font-size: var(--tag-fit-size, 9.5px);
    }
  }
  @media (max-width: 380px) {
    .hero-headline {
      font-size: 36px;
    }
  }
  @media (max-width: 360px) {
    .hero-headline {
      font-size: 34px;
    }
    .hero-tags {
      gap: 5px;
    }
    .tag {
      --tag-pad: 3px;
      font-size: var(--tag-fit-size, 8.4px);
      letter-spacing: -0.01em;
    }
  }
  [data-spotlight] {
    --mx: 50%;
    --my: 50%;
    position: relative;
    overflow: hidden;
  }
  [data-spotlight]:before {
    content: "";
    background: radial-gradient(
      180px circle at var(--mx) var(--my),
      rgba(77, 146, 255, 0.08),
      transparent 80%
    );
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.4s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  [data-spotlight]:hover:before {
    opacity: 1;
  }
  .metrics-band {
    z-index: 2;
    padding: var(--space-section-compact) 0 var(--space-section-compact);
    margin: 0;
    position: relative;
  }
  .metrics-band .inner {
    padding: var(--space-card-large-y) var(--space-card-large-x);
    border: 1px solid var(--line);
    border-radius: var(--rx-xl);
    background: var(--glass);
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    display: grid;
  }
  .metrics-band .inner[data-spotlight]:before {
    background: radial-gradient(
      420px circle at var(--mx) var(--my),
      rgba(77, 146, 255, 0.11),
      rgba(5, 150, 105, 0.055) 32%,
      transparent 72%
    );
  }
  .metrics-band .inner[data-spotlight] > * {
    z-index: 1;
    position: relative;
  }
  .metric-card {
    align-items: center;
    gap: 16px;
    padding: max(10px, min(1.1vw, 12px)) max(12px, min(1.4vw, 20px));
    display: flex;
  }
  .metrics-band .metric-card,
  .metrics-band .metric-divider {
    opacity: 0;
    will-change: opacity, transform;
    transform: translateY(18px);
  }
  .metrics-band.is-visible .metric-card {
    animation: 0.78s cubic-bezier(0.16, 1, 0.3, 1) both metricRise;
  }
  .metrics-band.is-visible .metric-divider {
    animation: 0.68s cubic-bezier(0.16, 1, 0.3, 1) both metricDividerIn;
  }
  .metrics-band.is-visible .metric-card:first-child {
    animation-delay: 80ms;
  }
  .metrics-band.is-visible .metric-divider:nth-child(2) {
    animation-delay: 0.24s;
  }
  .metrics-band.is-visible .metric-card:nth-child(3) {
    animation-delay: 0.4s;
  }
  .metrics-band.is-visible .metric-divider:nth-child(4) {
    animation-delay: 0.56s;
  }
  .metrics-band.is-visible .metric-card:nth-child(5) {
    animation-delay: 0.72s;
  }
  .metrics-band.is-visible .metric-divider:nth-child(6) {
    animation-delay: 0.88s;
  }
  .metrics-band.is-visible .metric-card:nth-child(7) {
    animation-delay: 1.04s;
  }
  .metric-icon {
    transform-origin: 50%;
    will-change: transform, filter;
    flex-shrink: 0;
    font-size: 24px;
    animation-duration: 9.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    display: inline-block;
  }
  .metrics-band.is-visible .metric-card:first-child .metric-icon {
    animation-name: metricAlarmShake;
    animation-timing-function: linear;
    animation-delay: 0.74s;
  }
  .metrics-band.is-visible .metric-card:nth-child(3) .metric-icon {
    animation-name: metricBrainBreathe;
    animation-timing-function: ease-in-out;
    animation-delay: 0.74s;
  }
  .metrics-band.is-visible .metric-card:nth-child(5) .metric-icon {
    animation-name: metricLockImpact;
    animation-timing-function: linear;
    animation-delay: 0.74s;
  }
  .metrics-band.is-visible .metric-card:nth-child(7) .metric-icon {
    animation-name: metricStepZoom;
    animation-timing-function: step-end;
    animation-delay: 0.74s;
  }
  .metric-text {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }
  .metric-text strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
  }
  .metric-text span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
  }
  .metric-divider {
    background: var(--line-s);
    flex-shrink: 0;
    width: 1px;
    height: 40px;
    margin: 0 4px;
  }
  @keyframes metricRise {
    0% {
      opacity: 0;
      transform: translateY(18px) scale(0.985);
    }
    70% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }
  @keyframes metricDividerIn {
    0% {
      opacity: 0;
      transform: translateY(12px) scaleY(0.24);
    }
    68% {
      opacity: 0.84;
    }
    to {
      opacity: 1;
      transform: translate(0, 0) scaleY(1);
    }
  }
  @keyframes metricAlarmShake {
    0%,
    2%,
    14%,
    to {
      filter: none;
      transform: rotate(0) translate(0);
    }
    3% {
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.28));
      transform: rotate(-18deg) translate(-1px);
    }
    4% {
      transform: rotate(18deg) translate(1px);
    }
    5% {
      transform: rotate(-14deg) translate(-1px);
    }
    6% {
      transform: rotate(12deg) translate(1px);
    }
    7.2% {
      transform: rotate(-7deg);
    }
    8.5% {
      transform: rotate(5deg);
    }
    10.5% {
      filter: none;
      transform: rotate(0);
    }
  }
  @keyframes metricBrainBreathe {
    0%,
    24%,
    39%,
    to {
      filter: drop-shadow(0 0 rgba(139, 92, 246, 0));
      transform: scale(1);
    }
    29% {
      filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.42));
      transform: scale(1.16);
    }
    34% {
      filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.26));
      transform: scale(1.07);
    }
  }
  @keyframes metricLockImpact {
    0%,
    49%,
    64%,
    to {
      filter: none;
      transform: translate(0) rotate(0);
    }
    51% {
      filter: drop-shadow(0 0 10px rgba(217, 119, 6, 0.35));
      transform: translate(3px, -1px) rotate(7deg) scale(1.08);
    }
    53% {
      transform: translate(-5px, 1px) rotate(-11deg) scale(0.94);
    }
    55% {
      transform: translate(4px) rotate(8deg) scale(1.05);
    }
    57% {
      transform: translate(-2px) rotate(-4deg);
    }
    60% {
      transform: translate(1px) rotate(2deg);
    }
  }
  @keyframes metricStepZoom {
    0%,
    74%,
    98%,
    to {
      filter: none;
      transform: scale(1);
    }
    79%,
    84% {
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.32));
      transform: scale(1.13);
    }
    89%,
    94% {
      filter: drop-shadow(0 0 14px rgba(77, 146, 255, 0.46));
      transform: scale(1.28);
    }
  }
  @media (max-width: 980px) {
    .metrics-band .inner {
      gap: var(--space-grid);
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    }
    .metrics-band .metric-card:first-child {
      grid-area: 1/1;
    }
    .metrics-band .metric-divider:nth-child(2) {
      grid-area: 1/2;
      align-self: stretch;
      width: 1px;
      height: auto;
      margin: 0;
    }
    .metrics-band .metric-card:nth-child(3) {
      grid-area: 1/3;
    }
    .metrics-band .metric-divider:nth-child(4) {
      grid-area: 2/1 / auto/-1;
      width: 100%;
      height: 1px;
      margin: 0;
    }
    .metrics-band .metric-card:nth-child(5) {
      grid-area: 3/1;
    }
    .metrics-band .metric-divider:nth-child(6) {
      grid-area: 3/2;
      align-self: stretch;
      width: 1px;
      height: auto;
      margin: 0;
    }
    .metrics-band .metric-card:nth-child(7) {
      grid-area: 3/3;
    }
    .metric-card {
      padding: 10px 6px;
    }
  }
  @media (max-width: 640px) {
    .metrics-band .inner {
      grid-template-columns: 1fr;
      gap: 0;
      padding-left: var(--space-card-standard-x);
      padding-right: var(--space-card-standard-x);
    }
    .metrics-band .metric-card:first-child,
    .metrics-band .metric-card:nth-child(3),
    .metrics-band .metric-card:nth-child(5),
    .metrics-band .metric-card:nth-child(7) {
      grid-area: auto;
    }
    .metrics-band .metric-card:first-child,
    .metrics-band .metric-card:nth-child(3),
    .metrics-band .metric-card:nth-child(5),
    .metrics-band .metric-card:nth-child(7) {
      grid-area: auto;
    }
    .metrics-band .metric-divider:nth-child(2),
    .metrics-band .metric-divider:nth-child(4),
    .metrics-band .metric-divider:nth-child(6) {
      grid-area: auto;
      align-self: auto;
      width: 100% !important;
      min-width: 0;
      height: 0 !important;
      min-height: 0;
      border-top: 1px solid var(--line-s);
      background: none !important;
      margin: 10px 0;
      animation-name: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
    .metric-card {
      padding: 14px 0;
    }
    .metric-card {
      padding: 14px 0;
    }
  }
  .wireflow-origin-section {
    padding-top: var(--space-section-compact);
    padding-bottom: 0;
    scroll-margin-top: max(112px, min(12vh, 136px));
  }
  .origin-card {
    padding: var(--space-card-large-y) var(--space-card-large-x);
    border: 1px solid var(--line-s);
    border-radius: var(--rx-xl);
    background: rgba(255, 255, 255, 0.68);
    position: relative;
    overflow: hidden;
  }
  .origin-glow {
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(at 74% 45%, rgba(77, 146, 255, 0.14), transparent 48%),
      radial-gradient(at 38% 62%, rgba(5, 150, 105, 0.08), transparent 52%),
      radial-gradient(at 66% 72%, rgba(124, 58, 237, 0.08), transparent 46%);
    position: absolute;
    top: -34%;
    bottom: -34%;
    left: -34%;
    right: -34%;
  }
  .origin-layout {
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.72fr);
    align-items: center;
    gap: max(34px, min(6vw, 82px));
    display: grid;
    position: relative;
  }
  .origin-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    display: flex;
    position: relative;
  }
  .origin-content h2 {
    max-width: 620px;
    font-size: max(28px, min(4vw, 48px));
  }
  .origin-content p {
    max-width: 610px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
  }
  .origin-loop {
    border-top: 1px solid var(--line);
    gap: 0;
    width: min(100%, 580px);
    margin-top: 6px;
    display: grid;
  }
  .origin-loop-item {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    padding: 14px 0;
    display: grid;
    transform: translate(-12px, 16px);
  }
  .origin-card.is-visible .origin-loop-item {
    animation: originLoopItemIn 0.72s var(--ease) both;
  }
  .origin-card.is-visible .origin-loop-item:first-child {
    animation-delay: 0.24s;
  }
  .origin-card.is-visible .origin-loop-item:nth-child(2) {
    animation-delay: 0.4s;
  }
  .origin-card.is-visible .origin-loop-item:nth-child(3) {
    animation-delay: 0.56s;
  }
  .origin-card.is-visible .origin-loop-item > span {
    animation: originLoopBadgeIn 0.72s var(--ease) both;
  }
  .origin-card.is-visible .origin-loop-item:first-child > span {
    animation-delay: 0.34s;
  }
  .origin-card.is-visible .origin-loop-item:nth-child(2) > span {
    animation-delay: 0.5s;
  }
  .origin-card.is-visible .origin-loop-item:nth-child(3) > span {
    animation-delay: 0.66s;
  }
  .origin-loop-item > span {
    width: 34px;
    height: 24px;
    color: var(--cyan);
    border: 1px solid rgba(77, 146, 255, 0.22);
    border-radius: 999px;
    grid-row: span 2;
    justify-content: center;
    align-items: center;
    font-family:
      DM Mono,
      monospace;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
  }
  .origin-loop-item strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
  }
  .origin-loop-item small {
    color: var(--muted);
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
  }
  @keyframes originLoopItemIn {
    0% {
      opacity: 0;
      transform: translate(-12px, 16px);
    }
    58% {
      opacity: 1;
      transform: translate(2px, -1px);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  @keyframes originLoopBadgeIn {
    0% {
      border-color: rgba(77, 146, 255, 0.12);
      box-shadow: 0 0 rgba(77, 146, 255, 0);
    }
    58% {
      border-color: rgba(77, 146, 255, 0.48);
      box-shadow: 0 0 18px rgba(77, 146, 255, 0.24);
    }
    to {
      border-color: rgba(77, 146, 255, 0.22);
      box-shadow: 0 0 rgba(77, 146, 255, 0);
    }
  }
  .origin-visual {
    isolation: isolate;
    --origin-cycle: 9.6s;
    --origin-quint: cubic-bezier(0.16, 1, 0.3, 1);
    align-items: center;
    justify-items: center;
    min-height: 360px;
    display: grid;
    position: relative;
  }
  .origin-visual:before,
  .origin-visual:after {
    content: "";
    pointer-events: none;
    border-radius: 50%;
    position: absolute;
  }
  .origin-visual:before {
    border: 1px solid rgba(77, 146, 255, 0.18);
    width: min(380px, 78vw);
    height: min(380px, 78vw);
    transform: rotate(-14deg) scaleX(1.08);
    box-shadow:
      0 0 58px rgba(77, 146, 255, 0.12),
      inset 0 0 44px rgba(5, 150, 105, 0.05);
  }
  .origin-visual:after {
    filter: blur(16px);
    opacity: 0.48;
    background: conic-gradient(
      from 150deg,
      rgba(77, 146, 255, 0.38),
      transparent 24%,
      rgba(5, 150, 105, 0.28),
      transparent 54%,
      rgba(124, 58, 237, 0.32),
      transparent 82%,
      rgba(77, 146, 255, 0.28)
    );
    width: min(310px, 66vw);
    height: min(310px, 66vw);
    animation: 18s linear infinite avatarSpin;
  }
  .origin-photo-shell {
    z-index: 3;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    width: max(190px, min(22vw, 260px));
    position: relative;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(77, 146, 255, 0.28),
      0 0 0 10px rgba(77, 146, 255, 0.043),
      0 28px 80px rgba(15, 23, 42, 0.208),
      0 0 68px rgba(77, 146, 255, 0.14);
  }
  .origin-photo-shell img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
  .origin-constellation {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible;
  }
  .origin-link {
    fill: none;
    stroke: rgba(77, 146, 255, 0.64);
    stroke-width: 1.45px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1px;
    filter: drop-shadow(0 0 6px rgba(77, 146, 255, 0.48))
      drop-shadow(0 0 16px rgba(77, 146, 255, 0.18));
    opacity: 0;
    animation: originLinkA var(--origin-cycle) ease-in-out infinite;
  }
  .origin-link-b {
    animation-name: originLinkB;
  }
  .origin-link-c {
    stroke: rgba(5, 150, 105, 0.58);
    animation-name: originLinkC;
  }
  .origin-signal,
  .origin-tax-meter {
    border: 1px solid var(--line-s);
    opacity: 0;
    animation-duration: var(--origin-cycle);
    animation-timing-function: var(--origin-quint);
    background: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    animation-iteration-count: infinite;
    position: absolute;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  }
  .origin-signal {
    z-index: 6;
    flex-direction: column;
    gap: 2px;
    min-width: 158px;
    padding: 9px 13px;
    display: flex;
  }
  .origin-signal:before {
    content: "";
    width: 6px;
    height: 6px;
    animation-duration: var(--origin-cycle);
    background: rgb(225, 29, 72);
    border-radius: 50%;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.72);
  }
  .origin-signal strong {
    color: var(--ink);
    padding-left: 14px;
    font-size: 12px;
    line-height: 1;
  }
  .origin-signal span {
    color: var(--dim);
    padding-left: 14px;
    font-family:
      DM Mono,
      monospace;
    font-size: 10px;
  }
  .origin-signal-a {
    --tx: -50%;
    --ty: 0px;
    --start-x: 0px;
    --start-y: 132px;
    --mid-x: 0px;
    --mid-y: 62px;
    --out-x: 0px;
    --out-y: -42px;
    --burst-x: 0px;
    --burst-y: -132px;
    animation-name: originSignalA;
    top: 18px;
    left: 50%;
    transform: translate(-50%);
  }
  .origin-signal-b {
    --tx: 0px;
    --ty: 0px;
    --start-x: 122px;
    --start-y: -90px;
    --mid-x: 56px;
    --mid-y: -42px;
    --out-x: -46px;
    --out-y: 34px;
    --burst-x: -148px;
    --burst-y: 110px;
    animation-name: originSignalB;
    top: 230px;
    left: 2px;
  }
  .origin-signal-c {
    --tx: 0px;
    --ty: 0px;
    --start-x: -122px;
    --start-y: -90px;
    --mid-x: -56px;
    --mid-y: -42px;
    --out-x: 46px;
    --out-y: 34px;
    --burst-x: 148px;
    --burst-y: 110px;
    animation-name: originSignalC;
    top: 230px;
    right: 2px;
  }
  .origin-signal-a:before {
    animation-name: originDotA;
  }
  .origin-signal-b:before {
    animation-name: originDotB;
  }
  .origin-signal-c:before {
    animation-name: originDotC;
  }
  .origin-tax-meter {
    z-index: 4;
    --tx: -50%;
    --ty: 0px;
    --start-x: 0px;
    --start-y: -74px;
    --mid-x: 0px;
    --mid-y: -34px;
    --out-x: 0px;
    --out-y: 34px;
    --burst-x: 0px;
    --burst-y: 96px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    animation-name: originMeterNode;
    display: flex;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%);
  }
  .origin-tax-meter span {
    color: var(--cyan);
    white-space: nowrap;
    font-family:
      DM Mono,
      monospace;
    font-size: 11px;
  }
  .origin-tax-meter i {
    width: 62px;
    height: 4px;
    animation: originMeterGlow var(--origin-cycle) ease-in-out infinite;
    background: rgba(77, 146, 255, 0.12);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(77, 146, 255, 0.08);
  }
  .origin-tax-meter i:before {
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    transform-origin: 0;
    width: 100%;
    animation: originMeterFill var(--origin-cycle) linear infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scaleX(0);
    box-shadow:
      0 0 18px rgba(77, 146, 255, 0.55),
      0 0 36px rgba(5, 150, 105, 0.32);
  }
  @media (min-width: 821px) and (max-width: 980px) {
    .origin-signal-b,
    .origin-signal-c {
      width: calc(50% - 2.5px);
      min-width: 0;
      padding: 8px 10px;
    }
    .origin-signal-b {
      left: 0;
    }
    .origin-signal-c {
      right: 0;
    }
    .origin-signal-b strong,
    .origin-signal-c strong {
      font-size: 11px;
    }
    .origin-signal-b span,
    .origin-signal-c span {
      font-size: 9px;
    }
  }
  @keyframes originSignalA {
    0%,
    12% {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--start-x)),
          calc(var(--ty) + var(--start-y))
        )
        scale(0.72);
    }
    17% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.045);
    }
    21%,
    70% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1);
    }
    74% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.02);
    }
    79% {
      opacity: 0.98;
      transform: translate(
          calc(var(--tx) + var(--out-x)),
          calc(var(--ty) + var(--out-y))
        )
        scale(1.08);
    }
    84% {
      opacity: 0.68;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.84);
    }
    90%,
    to {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.46);
    }
  }
  @keyframes originMeterNode {
    0%,
    2% {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--start-x)),
          calc(var(--ty) + var(--start-y))
        )
        scale(0.72);
    }
    8% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.035);
    }
    12%,
    70% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1);
    }
    74% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.02);
    }
    79% {
      opacity: 0.98;
      transform: translate(
          calc(var(--tx) + var(--out-x)),
          calc(var(--ty) + var(--out-y))
        )
        scale(1.08);
    }
    84% {
      opacity: 0.68;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.84);
    }
    90%,
    to {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.46);
    }
  }
  @keyframes originSignalC {
    0%,
    21% {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--start-x)),
          calc(var(--ty) + var(--start-y))
        )
        scale(0.72);
    }
    26% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.04);
    }
    30%,
    70% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1);
    }
    74% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.02);
    }
    79% {
      opacity: 0.98;
      transform: translate(
          calc(var(--tx) + var(--out-x)),
          calc(var(--ty) + var(--out-y))
        )
        scale(1.08);
    }
    84% {
      opacity: 0.68;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.84);
    }
    90%,
    to {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.46);
    }
  }
  @keyframes originSignalB {
    0%,
    30% {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--start-x)),
          calc(var(--ty) + var(--start-y))
        )
        scale(0.72);
    }
    35% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.04);
    }
    39%,
    70% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1);
    }
    74% {
      opacity: 1;
      transform: translate(var(--tx), var(--ty)) scale(1.02);
    }
    79% {
      opacity: 0.98;
      transform: translate(
          calc(var(--tx) + var(--out-x)),
          calc(var(--ty) + var(--out-y))
        )
        scale(1.08);
    }
    84% {
      opacity: 0.68;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.84);
    }
    90%,
    to {
      opacity: 0;
      transform: translate(
          calc(var(--tx) + var(--burst-x)),
          calc(var(--ty) + var(--burst-y))
        )
        scale(0.46);
    }
  }
  @keyframes originLinkB {
    0%,
    22% {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
    31%,
    70% {
      opacity: 0.7;
      stroke-dashoffset: 0;
    }
    78% {
      opacity: 0.28;
      stroke-dashoffset: 0;
    }
    90%,
    to {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
  }
  @keyframes originLinkA {
    0%,
    31% {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
    40%,
    70% {
      opacity: 0.72;
      stroke-dashoffset: 0;
    }
    78% {
      opacity: 0.28;
      stroke-dashoffset: 0;
    }
    90%,
    to {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
  }
  @keyframes originLinkC {
    0%,
    35% {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
    44%,
    70% {
      opacity: 0.62;
      stroke-dashoffset: 0;
    }
    78% {
      opacity: 0.26;
      stroke-dashoffset: 0;
    }
    90%,
    to {
      opacity: 0;
      stroke-dashoffset: 1px;
    }
  }
  @keyframes originMeterFill {
    0%,
    8% {
      filter: brightness();
      transform: scaleX(0);
    }
    39% {
      filter: brightness(1.15) drop-shadow(0 0 10px rgba(77, 146, 255, 0.74));
      transform: scaleX(1);
    }
    50%,
    70% {
      filter: brightness(1.65) drop-shadow(0 0 8px rgba(77, 146, 255, 0.9))
        drop-shadow(0 0 18px rgba(5, 150, 105, 0.78))
        drop-shadow(0 0 30px rgba(5, 150, 105, 0.42));
      transform: scaleX(1);
    }
    90%,
    to {
      filter: brightness();
      transform: scaleX(1);
    }
  }
  @keyframes originMeterGlow {
    0%,
    8%,
    90%,
    to {
      filter: none;
      box-shadow: inset 0 0 0 1px rgba(77, 146, 255, 0.08);
    }
    39% {
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.58));
      box-shadow:
        inset 0 0 0 1px rgba(77, 146, 255, 0.14),
        0 0 14px rgba(77, 146, 255, 0.26);
    }
    50%,
    70% {
      filter: drop-shadow(0 0 10px rgba(77, 146, 255, 0.82))
        drop-shadow(0 0 22px rgba(5, 150, 105, 0.62))
        drop-shadow(0 0 42px rgba(5, 150, 105, 0.3));
      box-shadow:
        inset 0 0 0 1px rgba(77, 146, 255, 0.22),
        0 0 18px rgba(77, 146, 255, 0.42),
        0 0 34px rgba(5, 150, 105, 0.28);
    }
  }
  @keyframes originDotA {
    0%,
    12.4% {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    12.8%,
    14%,
    15.3%,
    16.4% {
      opacity: 1;
      background: rgb(225, 29, 72);
      box-shadow: 0 0 13px rgba(225, 29, 72, 0.76);
    }
    13.4%,
    14.7%,
    15.9% {
      opacity: 0.14;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    17.8%,
    70% {
      opacity: 1;
      background: var(--green);
      box-shadow: 0 0 14px rgba(5, 150, 105, 0.72);
    }
    90%,
    to {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
  }
  @keyframes originDotC {
    0%,
    21.4% {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    21.8%,
    23%,
    24.3%,
    25.4% {
      opacity: 1;
      background: rgb(225, 29, 72);
      box-shadow: 0 0 13px rgba(225, 29, 72, 0.76);
    }
    22.4%,
    23.7%,
    24.9% {
      opacity: 0.14;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    26.8%,
    70% {
      opacity: 1;
      background: var(--green);
      box-shadow: 0 0 14px rgba(5, 150, 105, 0.72);
    }
    90%,
    to {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
  }
  @keyframes originDotB {
    0%,
    30.4% {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    30.8%,
    32%,
    33.3%,
    34.4% {
      opacity: 1;
      background: rgb(225, 29, 72);
      box-shadow: 0 0 13px rgba(225, 29, 72, 0.76);
    }
    31.4%,
    32.7%,
    33.9% {
      opacity: 0.14;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
    35.8%,
    70% {
      opacity: 1;
      background: var(--green);
      box-shadow: 0 0 14px rgba(5, 150, 105, 0.72);
    }
    90%,
    to {
      opacity: 0;
      box-shadow: none;
      background: rgb(225, 29, 72);
    }
  }
  @media (max-width: 820px) {
    .origin-layout {
      grid-template-columns: 1fr;
    }
    .origin-visual {
      min-height: 310px;
    }
  }
  @media (max-width: 520px) {
    .origin-content {
      text-align: center;
      align-items: center;
    }
    .origin-loop-item {
      text-align: left;
    }
    .origin-signal {
      min-width: 142px;
      padding: 8px 11px;
    }
    .origin-signal:before {
      left: 11px;
    }
    .origin-signal-a {
      --start-y: 112px;
      --out-y: -34px;
      --burst-y: -108px;
      top: 8px;
      left: 50%;
    }
    .origin-signal-b {
      --start-x: 104px;
      --start-y: -64px;
      --out-x: -36px;
      --out-y: 28px;
      --burst-x: -118px;
      --burst-y: 86px;
      top: 184px;
      left: -8px;
    }
    .origin-signal-c {
      --start-x: -104px;
      --start-y: -64px;
      --out-x: 36px;
      --out-y: 28px;
      --burst-x: 118px;
      --burst-y: 86px;
      top: 184px;
      right: -8px;
    }
    .origin-tax-meter {
      --start-y: -56px;
      --out-y: 30px;
      --burst-y: 78px;
      bottom: 20px;
    }
  }
  #capabilities {
    padding-top: var(--space-section-tight);
    padding-bottom: 0;
  }
  .caps-grid {
    gap: var(--space-grid);
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }
  @media (max-width: 1100px) {
    .caps-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 700px) {
    .caps-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 440px) {
    .caps-grid {
      grid-template-columns: 1fr;
    }
  }
  .cap-card {
    padding: var(--space-card-standard-y) var(--space-card-standard-x);
    border: 1px solid var(--line);
    border-radius: var(--rx-lg);
    transition:
      border-color 0.22s,
      box-shadow 0.22s,
      transform 0.22s var(--ease);
    background: rgba(255, 255, 255, 0.6);
    flex-direction: column;
    gap: 14px;
    display: flex;
  }
  .cap-card:hover {
    border-color: rgba(77, 146, 255, 0.3);
    transform: translateY(-4px);
    box-shadow:
      0 20px 60px rgba(15, 23, 42, 0.16),
      0 0 0 1px rgba(77, 146, 255, 0.08);
  }
  .cap-icon {
    border: 1px solid var(--line-s);
    border-radius: var(--rx-md);
    width: 44px;
    height: 44px;
    color: var(--cyan);
    background: rgba(77, 146, 255, 0.06);
    flex-shrink: 0;
    align-items: center;
    justify-items: center;
    display: grid;
  }
  .cap-icon svg {
    width: 24px;
    height: 24px;
  }
  .cap-card h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }
  .cap-card p {
    color: var(--muted);
    flex: 1;
    font-size: 13px;
    line-height: 1.55;
  }
  .cap-tags {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    display: flex;
  }
  .cap-tags span {
    color: var(--dim);
    border: 1px solid var(--line);
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
  }
  .nda-section {
    padding-top: var(--space-section-tight);
    background: 0 0;
    padding-bottom: 0;
  }
  .nda-banner {
    align-items: center;
    gap: var(--space-grid);
    padding: var(--space-card-standard-y) var(--space-card-standard-x);
    border-radius: var(--rx-xl);
    margin-bottom: var(--space-header-content);
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.25);
    display: flex;
  }
  .nda-lock {
    flex-shrink: 0;
    font-size: 32px;
  }
  .nda-banner-text h2 {
    margin-bottom: 8px;
    font-size: max(20px, min(3vw, 30px));
  }
  .nda-banner-text p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  .case-study {
    border: 1px solid var(--line);
    border-radius: var(--rx-xl);
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
  }
  .case-study-header {
    padding: var(--space-card-large-y) var(--space-card-large-x);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  .case-study-header h3 {
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .case-study-header p {
    color: var(--muted);
    width: 100%;
    max-width: none;
    font-size: 15px;
    line-height: 1.6;
  }
  .case-study-body {
    padding: var(--space-card-large-y) var(--space-card-large-x);
    gap: var(--space-grid);
    flex-direction: column;
    display: flex;
  }
  .flow-diagram {
    justify-content: space-between;
    align-items: center;
    gap: max(8px, min(1.2vw, 16px));
    width: 100%;
    padding-bottom: 8px;
    display: flex;
    overflow: hidden;
  }
  .flow-node {
    border: 1px solid var(--line);
    border-radius: var(--rx-md);
    cursor: default;
    background: rgba(255, 255, 255, 0.7);
    flex-direction: column;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 16px 14px;
    transition:
      border-color 0.22s,
      box-shadow 0.22s;
    display: flex;
  }
  .flow-diagram .flow-node,
  .flow-diagram .flow-arrow {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  .flow-diagram.is-visible .flow-node,
  .flow-diagram.is-visible .flow-arrow {
    animation: flowItemSettle 0.5s var(--ease) forwards;
  }
  .flow-diagram.is-visible > :first-child {
    animation-delay: 20ms;
  }
  .flow-diagram.is-visible > :nth-child(2) {
    animation-delay: 0.12s;
  }
  .flow-diagram.is-visible > :nth-child(3) {
    animation-delay: 0.22s;
  }
  .flow-diagram.is-visible > :nth-child(4) {
    animation-delay: 0.32s;
  }
  .flow-diagram.is-visible > :nth-child(5) {
    animation-delay: 0.42s;
  }
  .flow-diagram.is-visible > :nth-child(6) {
    animation-delay: 0.52s;
  }
  .flow-diagram.is-visible > :nth-child(7) {
    animation-delay: 0.62s;
  }
  .flow-diagram.is-visible > :nth-child(8) {
    animation-delay: 0.72s;
  }
  .flow-diagram.is-visible > :nth-child(9) {
    animation-delay: 0.82s;
  }
  .flow-node:hover {
    border-color: rgba(77, 146, 255, 0.3);
    box-shadow: 0 0 20px rgba(77, 146, 255, 0.08);
  }
  .flow-node-icon {
    font-size: 18px;
  }
  .flow-node-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
  }
  .flow-node-sub {
    color: var(--dim);
    text-align: center;
    font-family:
      DM Mono,
      monospace;
    font-size: 10px;
  }
  .flow-node--input .flow-node-icon {
    color: var(--muted);
  }
  .flow-node--process .flow-node-icon {
    color: var(--cyan);
  }
  .flow-node--ai {
    border-color: rgba(77, 146, 255, 0.25);
  }
  .flow-node--ai .flow-node-icon {
    color: var(--cyan);
  }
  .flow-node--human {
    border-color: rgba(5, 150, 105, 0.2);
  }
  .flow-node--human .flow-node-icon {
    color: var(--green);
  }
  .flow-node--output {
    border-color: rgba(124, 58, 237, 0.2);
  }
  .flow-node--output .flow-node-icon {
    color: var(--purple);
  }
  .flow-arrow {
    color: var(--dim);
    text-align: center;
    flex: 0 0 18px;
    font-size: 18px;
  }
  @keyframes flowItemSettle {
    0% {
      opacity: 0;
      transform: translateY(14px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .redacted-dash {
    border-radius: var(--rx-md);
    background:
      radial-gradient(
        circle at 85% 18%,
        rgba(5, 150, 105, 0.08),
        transparent 30%
      ),
      rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(77, 146, 255, 0.12);
    overflow: hidden;
  }
  .redacted-dash-header {
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.5);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    display: flex;
  }
  .redact-label {
    letter-spacing: 0.1em;
    color: var(--purple);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
  }
  .redact-tag {
    color: var(--dim);
    font-family:
      DM Mono,
      monospace;
    font-size: 12px;
  }
  .redacted-dash-body {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    display: grid;
  }
  .redact-metrics {
    grid-row: 1 / span 4;
    gap: 10px;
    display: grid;
  }
  .redact-metric {
    border: 1px solid var(--line);
    border-radius: var(--rx-sm);
    background: rgba(77, 146, 255, 0.035);
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 18px;
    display: flex;
  }
  .redact-metric span {
    color: var(--ink);
    font-family:
      Clash Display,
      ui-sans-serif;
    font-size: max(28px, min(3.2vw, 34px));
    line-height: 1;
    display: block;
  }
  .redact-metric small {
    color: var(--dim);
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.25;
    display: block;
  }
  .redact-metric--hot {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.22);
  }
  .redact-metric--hot span {
    color: var(--green);
  }
  .redact-row {
    border-radius: var(--rx-sm);
    background: rgba(77, 146, 255, 0.024);
    border: 1px solid rgba(77, 146, 255, 0.08);
    grid-column: 2;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .redact-row:before {
    content: "";
    background: linear-gradient(
      105deg,
      transparent 0,
      transparent 38%,
      rgba(77, 146, 255, 0.09),
      transparent 62%,
      transparent 100%
    );
    animation: 3.6s ease-in-out infinite redactSweep;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translate(-120%);
  }
  .redact-row.row-active {
    background: rgba(77, 146, 255, 0.055);
    border-color: rgba(77, 146, 255, 0.22);
    box-shadow:
      inset 0 0 0 1px rgba(77, 146, 255, 0.035),
      0 0 24px rgba(77, 146, 255, 0.06);
  }
  .redact-copy {
    z-index: 1;
    flex: 1;
    min-width: 0;
    position: relative;
  }
  .redact-copy strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.15;
    display: block;
  }
  .redact-copy span {
    color: var(--dim);
    margin-top: 4px;
    font-size: 11px;
    display: block;
  }
  .redact-progress {
    background: rgba(77, 146, 255, 0.07);
    border-radius: 999px;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
  }
  .redact-progress i {
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), rgba(5, 150, 105, 0.7));
    transform-origin: 0;
    height: 100%;
    animation: redactProgress 2.8s var(--ease) infinite alternate;
    display: block;
  }
  .redact-badge {
    border: 1px solid var(--line);
    color: var(--dim);
    white-space: nowrap;
    z-index: 1;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 11px;
    position: relative;
  }
  .redact-badge--green {
    color: var(--green);
    border-color: rgba(5, 150, 105, 0.25);
  }
  .redact-badge--cyan {
    color: var(--cyan);
    border-color: rgba(77, 146, 255, 0.25);
  }
  .redact-badge--purple {
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.28);
  }
  .redacted-dash.is-visible .redact-row,
  .redacted-dash.is-visible .redact-metric {
    animation: redactedItemIn 0.55s var(--ease) both;
  }
  .redacted-dash.is-visible .redact-metric:first-child {
    animation-delay: 40ms;
  }
  .redacted-dash.is-visible .redact-metric:nth-child(2) {
    animation-delay: 0.13s;
  }
  .redacted-dash.is-visible .redact-metric:nth-child(3) {
    animation-delay: 0.22s;
  }
  .redacted-dash.is-visible .redact-row:nth-child(2) {
    animation-delay: 0.18s;
  }
  .redacted-dash.is-visible .redact-row:nth-child(3) {
    animation-delay: 0.3s;
  }
  .redacted-dash.is-visible .redact-row:nth-child(4) {
    animation-delay: 0.42s;
  }
  .redacted-dash.is-visible .redact-row:nth-child(5) {
    animation-delay: 0.54s;
  }
  @keyframes redactedItemIn {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes redactSweep {
    0%,
    35% {
      opacity: 0;
      transform: translate(-120%);
    }
    55% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate(120%);
    }
  }
  @keyframes redactProgress {
    0% {
      transform: scaleX(0.72);
    }
    to {
      transform: scaleX(1);
    }
  }
  @media (max-width: 900px) {
    .nda-banner {
      flex-direction: column;
    }
    .flow-diagram {
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
    }
    .flow-diagram::-webkit-scrollbar {
      display: none;
    }
    .flow-diagram.flow-carousel {
      scroll-snap-type: none;
      overflow-x: hidden;
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 9%,
        #000 91%,
        transparent
      );
      mask-image: linear-gradient(
        90deg,
        transparent,
        #000 9%,
        #000 91%,
        transparent
      );
    }
    .flow-diagram.flow-carousel > * {
      opacity: 1;
      flex: none;
      transform: none;
      animation: none !important;
    }
    .flow-diagram.flow-carousel .flow-node {
      flex-basis: 158px;
      min-width: 158px;
    }
    .flow-diagram.flow-carousel .flow-arrow {
      flex-basis: 26px;
      align-items: center;
      justify-items: center;
      min-width: 26px;
      display: grid;
    }
    .flow-diagram.flow-carousel .flow-seam-arrow {
      color: rgba(77, 146, 255, 0.68);
      text-shadow: 0 0 14px rgba(77, 146, 255, 0.28);
    }
    .flow-clone {
      pointer-events: none;
    }
    .flow-node {
      min-width: 118px;
    }
    .redacted-dash-body {
      grid-template-columns: 1fr;
    }
    .redact-metrics,
    .redact-row {
      grid-area: auto;
    }
  }
  .module-section {
    background: 0 0;
  }
  .module-header {
    max-width: 560px;
    margin: 0 auto var(--space-header-content);
    text-align: center;
  }
  .module-board {
    border: 1px solid var(--line);
    border-radius: var(--rx-xl);
    background: rgba(255, 255, 255, 0.8);
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 0;
    width: min(1040px, 100%);
    min-height: 320px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    position: relative;
    overflow: hidden;
  }
  .module-shelf {
    border-right: 1px solid var(--line);
    padding: var(--space-card-standard-x);
    background: rgba(255, 255, 255, 0.5);
    flex-direction: column;
    gap: 8px;
    display: flex;
  }
  .module-file {
    --module-rgb: 57, 232, 255;
    border: 1px solid var(--line);
    border-radius: var(--rx-sm);
    color: var(--muted);
    cursor: grab;
    transition:
      border-color 0.18s,
      color 0.18s,
      transform 0.18s,
      box-shadow 0.18s,
      opacity 0.42s var(--ease);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: rgba(255, 255, 255, 0.6);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-family:
      DM Mono,
      Courier New,
      monospace;
    font-size: 12px;
    line-height: 1.1;
    display: flex;
    position: relative;
  }
  .module-file:hover {
    border-color: rgba(var(--module-rgb), 0.34);
    color: rgb(var(--module-rgb));
    box-shadow: 0 0 18px rgba(var(--module-rgb), 0.08);
    transform: translate(3px);
  }
  .module-file.placed {
    opacity: 0.4;
    pointer-events: none;
  }
  .module-file.placed.is-clicking {
    opacity: 1;
  }
  .module-file.is-clicking {
    border-color: rgba(var(--module-rgb), 0.48);
    color: rgb(var(--module-rgb));
    box-shadow:
      0 0 0 1px rgba(var(--module-rgb), 0.08),
      0 0 24px rgba(var(--module-rgb), 0.16);
    transform: translate(4px) scale(1.01);
  }
  .module-file.restoring {
    animation: shelfFileRestore 0.58s var(--ease) var(--restore-delay, 0s) both;
  }
  .mf-icon {
    color: rgb(var(--module-rgb));
    text-shadow: 0 0 10px rgba(var(--module-rgb), 0.42);
    flex-shrink: 0;
    font-size: 11px;
  }
  .mf-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .mf-size {
    color: var(--dim);
    font-size: 10px;
  }
  .module-cursor {
    --cursor-x: 24px;
    --cursor-y: 24px;
    --cursor-speed: 0.46s;
    --cursor-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pointer-hotspot-x: 12px;
    --pointer-hotspot-y: 1px;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    width: 34px;
    height: 38px;
    transform: translate3d(
      calc(var(--cursor-x) - var(--pointer-hotspot-x)),
      calc(var(--cursor-y) - var(--pointer-hotspot-y)),
      0
    );
    transition:
      transform var(--cursor-speed) var(--cursor-ease),
      opacity 0.24s ease,
      filter 0.24s ease;
    transform-origin: var(--pointer-hotspot-x) var(--pointer-hotspot-y);
    filter:
      drop-shadow(0 10px 18px rgba(15, 23, 42, 0.16))
      drop-shadow(0 0 10px rgba(77, 146, 255, 0.24));
    position: absolute;
    top: 0;
    left: 0;
  }
  .module-cursor.is-visible {
    opacity: 1;
  }
  .module-cursor-shape {
    background: linear-gradient(145deg, #2f73e8 0%, #4d92ff 58%, #8bb9ff 100%);
    width: 34px;
    height: 38px;
    position: absolute;
    top: 0;
    left: 0;
    scale: 1;
    box-shadow:
      inset 5px -8px 14px rgba(77, 146, 255, 0.3),
      inset -4px 4px 10px rgba(255, 255, 255, 0.24),
      0 0 22px rgba(77, 146, 255, 0.42);
    -webkit-mask: url(pointer.svg?v=20260528a) 0 0 / contain no-repeat;
    mask: url(pointer.svg?v=20260528a) 0 0 / contain no-repeat;
  }
  .module-cursor:after {
    content: "";
    left: calc(var(--pointer-hotspot-x) - 9px);
    top: calc(var(--pointer-hotspot-y) - 9px);
    opacity: 0;
    background: rgba(77, 146, 255, 0.12);
    border: 1px solid rgba(77, 146, 255, 0.76);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    position: absolute;
    transform: scale(0.45);
  }
  .module-cursor.is-clicking .module-cursor-shape {
    animation: 0.38s cubic-bezier(0.16, 1, 0.3, 1) both moduleCursorTap;
  }
  .module-cursor.is-clicking:after {
    animation: 0.44s ease-out both moduleCursorPulse;
  }
  @keyframes moduleCursorTap {
    0%,
    to {
      scale: 1;
    }
    46% {
      scale: 0.92;
    }
  }
  @keyframes moduleCursorPulse {
    0% {
      opacity: 0;
      transform: scale(0.45);
    }
    34% {
      opacity: 0.95;
      transform: scale(1.45);
    }
    to {
      opacity: 0;
      transform: scale(0.45);
    }
  }
  .module-canvas {
    padding: var(--space-card-standard-x);
    min-height: 320px;
    position: relative;
    overflow: hidden;
  }
  .canvas-grid-bg {
    background-image:
      linear-gradient(rgba(77, 146, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(77, 146, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .canvas-placeholder {
    color: var(--dim);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    font-family:
      DM Mono,
      monospace;
    font-size: 13px;
    transition: opacity 0.4s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .canvas-node {
    --module-rgb: 57, 232, 255;
    border: 1px solid rgba(var(--module-rgb), 0.38);
    border-radius: var(--rx-sm);
    background:
      radial-gradient(
        circle at 20% 35%,
        rgba(var(--module-rgb), 0.13),
        transparent 62%
      ),
      rgba(255, 255, 255, 0.95);
    color: rgb(var(--module-rgb));
    box-shadow: 0 4px 20px rgba(var(--module-rgb), 0.12);
    animation: nodeAppear 0.42s var(--ease) forwards;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family:
      DM Mono,
      monospace;
    font-size: 11px;
    transition:
      border-color 0.8s,
      box-shadow 0.8s,
      filter 0.8s;
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .canvas-node-icon {
    opacity: 0.8;
    font-size: 11px;
  }
  .canvas-node.cluster-clicked {
    animation: 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards nodeClusterGlow;
  }
  @keyframes nodeAppear {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.82) translateY(8px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) translateY(0);
    }
  }
  .canvas-node.is-exiting {
    animation: nodeExit 0.82s cubic-bezier(0.22, 1, 0.36, 1)
      var(--exit-delay, 0s) forwards;
  }
  .canvas-connector {
    --connector-rgb: 57, 232, 255;
    background: linear-gradient(
      90deg,
      rgba(var(--connector-rgb), 0.52),
      rgba(var(--connector-rgb), 0.12)
    );
    transform-origin: 0;
    pointer-events: none;
    height: 1px;
    animation: connAppear 0.3s var(--ease) forwards;
    z-index: 1;
    position: absolute;
  }
  @keyframes nodeClusterGlow {
    0% {
      filter: brightness();
      border-color: rgba(var(--module-rgb), 0.38);
      box-shadow: 0 4px 20px rgba(var(--module-rgb), 0.12);
    }
    to {
      filter: brightness(1.12);
      border-color: rgba(var(--module-rgb), 0.58);
      box-shadow:
        0 4px 24px rgba(var(--module-rgb), 0.22),
        0 0 24px rgba(5, 150, 105, 0.18),
        0 0 44px rgba(5, 150, 105, 0.1);
    }
  }
  @keyframes connAppear {
    0% {
      opacity: 0;
      transform: rotate(var(--rot, 0deg)) scaleX(0);
    }
    to {
      opacity: 1;
      transform: rotate(var(--rot, 0deg)) scaleX(1);
    }
  }
  .canvas-connector.is-exiting {
    animation: connExit 0.68s var(--ease) var(--exit-delay, 0s) forwards;
  }
  @keyframes nodeExit {
    0% {
      opacity: 1;
      filter: blur();
      transform: translate(-50%, -50%) scale(1);
    }
    46% {
      opacity: 0.76;
      filter: blur(0.3px);
      transform: translate(
          calc(-50% + var(--exit-x-mid, 0px)),
          calc(-50% + var(--exit-y-mid, 0px))
        )
        scale(0.96);
    }
    to {
      opacity: 0;
      filter: blur(2px);
      transform: translate(
          calc(-50% + var(--exit-x, 0px)),
          calc(-50% + var(--exit-y, 0px))
        )
        scale(0.82);
    }
  }
  @keyframes connExit {
    0% {
      opacity: 1;
      transform: rotate(var(--rot, 0deg)) scaleX(1);
    }
    to {
      opacity: 0;
      transform: rotate(var(--rot, 0deg)) scaleX(0);
    }
  }
  @keyframes shelfFileRestore {
    0% {
      opacity: 0.4;
      border-color: var(--line);
      transform: translate(0);
    }
    54% {
      opacity: 0.72;
      border-color: rgba(77, 146, 255, 0.28);
      transform: translate(2px);
    }
    to {
      opacity: 1;
      border-color: var(--line);
      transform: translate(0);
    }
  }
  @media (max-width: 640px) {
    .module-board {
      grid-template-columns: 1fr;
    }
    .module-shelf {
      border-right: none;
      border-bottom: 1px solid var(--line);
    }
    .module-canvas {
      min-height: 200px;
    }
  }
  .process-steps {
    gap: var(--space-grid);
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    position: relative;
  }
  .process-steps:before {
    content: none;
  }
  .process-step:not(:last-child):after {
    content: "";
    top: calc(var(--space-card-standard-y) + 30px);
    width: var(--space-grid);
    background: linear-gradient(90deg, var(--line-s), rgba(77, 146, 255, 0));
    opacity: 0;
    transform-origin: 0;
    height: 1px;
    position: absolute;
    left: 100%;
    transform: scaleX(0);
  }
  .process-steps.process-animate .process-step:not(:last-child):after {
    animation: processLineGrow 0.7s var(--ease) forwards;
    animation-delay: inherit;
  }
  .process-step {
    text-align: center;
    padding: var(--space-card-standard-y) var(--space-card-standard-x);
    border: 1px solid var(--line);
    border-radius: var(--rx-lg);
    transition:
      border-color 0.22s,
      transform 0.22s var(--ease);
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    display: flex;
    position: relative;
  }
  .process-steps.process-animate .process-step {
    animation: processStepIn 0.55s var(--ease) both;
  }
  .process-steps.process-animate .process-step:first-child {
    animation-delay: 50ms;
  }
  .process-steps.process-animate .process-step:nth-child(2) {
    animation-delay: 0.38s;
  }
  .process-steps.process-animate .process-step:nth-child(3) {
    animation-delay: 0.72s;
  }
  .process-steps.process-animate .process-step:nth-child(4) {
    animation-delay: 1.06s;
  }
  .process-step:hover {
    border-color: rgba(77, 146, 255, 0.3);
    transform: translateY(-6px);
  }
  .process-step-num {
    color: var(--cyan);
    background: var(--bg2);
    letter-spacing: 0.08em;
    border: 1px solid rgba(77, 146, 255, 0.3);
    border-radius: 999px;
    padding: 2px 10px;
    font-family:
      DM Mono,
      monospace;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translate(-50%);
  }
  .process-step-icon {
    border: 1px solid var(--line-s);
    width: 60px;
    height: 60px;
    color: var(--cyan);
    background: rgba(77, 146, 255, 0.06);
    border-radius: 50%;
    flex-shrink: 0;
    align-items: center;
    justify-items: center;
    display: grid;
  }
  .process-step-icon.icon-active {
    animation: processIconPulse 0.8s var(--ease) both;
  }
  .process-step-icon svg {
    width: 28px;
    height: 28px;
  }
  .process-step h3 {
    font-size: 15px;
    font-weight: 600;
  }
  .process-step p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
  }
  @keyframes processLineGrow {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }
    20% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }
  @keyframes processStepIn {
    0% {
      opacity: 0;
      transform: translate(-22px) translateY(8px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translate(0) translateY(0) scale(1);
    }
  }
  @keyframes processIconPulse {
    0% {
      transform: scale(0.94);
      box-shadow: 0 0 rgba(77, 146, 255, 0);
    }
    45% {
      transform: scale(1.06);
      box-shadow: 0 0 0 10px rgba(77, 146, 255, 0.08);
    }
    to {
      transform: scale(1);
      box-shadow: 0 0 rgba(77, 146, 255, 0);
    }
  }
  @media (max-width: 900px) {
    .process-steps {
      grid-template-columns: repeat(2, 1fr);
    }
    .process-step:after {
      display: none;
    }
  }
  @media (max-width: 500px) {
    .process-steps {
      grid-template-columns: 1fr;
    }
  }
  .stack-grid {
    gap: var(--space-grid);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
  .stack-cat--full {
    grid-column: 1/-1;
  }
  .stack-cat {
    border-radius: var(--rx-lg);
    width: 100%;
    color: inherit;
    text-align: left;
    cursor: pointer;
    perspective: 1200px;
    transform-style: preserve-3d;
    outline: none;
    padding: 0;
    display: block;
  }
  .stack-grid.is-visible .stack-cat {
    animation: 0.74s cubic-bezier(0.16, 1, 0.3, 1) both stackCardIn;
  }
  .stack-grid.is-visible .stack-cat:first-child {
    animation-delay: 40ms;
  }
  .stack-grid.is-visible .stack-cat:nth-child(2) {
    animation-delay: 0.3s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(3) {
    animation-delay: 0.56s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(4) {
    animation-delay: 0.82s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(5) {
    animation-delay: 1.08s;
  }
  .stack-card-inner {
    min-height: 224px;
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    display: grid;
  }
  .stack-cat--full .stack-card-inner {
    min-height: 156px;
  }
  .stack-card-face {
    padding: var(--space-card-standard-y) var(--space-card-standard-x);
    border: 1px solid var(--line);
    border-radius: var(--rx-lg);
    backface-visibility: hidden;
    background:
      radial-gradient(
        circle at 18% 16%,
        rgba(77, 146, 255, 0.08),
        transparent 36%
      ),
      rgba(255, 255, 255, 0.5);
    flex-direction: column;
    grid-area: 1/1;
    justify-content: center;
    transition:
      border-color 0.22s,
      box-shadow 0.22s,
      background 0.22s;
    display: flex;
  }
  .stack-card-back {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(5, 150, 105, 0.13),
        transparent 38%
      ),
      radial-gradient(
        circle at 78% 75%,
        rgba(139, 92, 246, 0.12),
        transparent 38%
      ),
      rgba(255, 255, 255, 0.82);
    justify-content: center;
    min-height: 100%;
    transform: rotateY(180deg);
  }
  .stack-cat:hover .stack-card-face {
    border-color: rgba(77, 146, 255, 0.24);
    box-shadow:
      0 18px 48px rgba(15, 23, 42, 0.088),
      inset 0 1px rgba(255, 255, 255, 0.04);
  }
  .stack-cat:focus-visible .stack-card-face {
    border-color: rgba(77, 146, 255, 0.24);
    box-shadow:
      0 18px 48px rgba(15, 23, 42, 0.088),
      inset 0 1px rgba(255, 255, 255, 0.04);
  }
  .stack-cat:focus-visible .stack-card-face {
    outline-offset: 4px;
    outline: 2px solid rgba(77, 146, 255, 0.55);
  }
  .stack-cat.is-flipped .stack-card-inner {
    transform: rotateY(180deg);
  }
  .stack-back-kicker {
    width: max-content;
    max-width: 100%;
    color: var(--cyan);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(77, 146, 255, 0.24);
    border-radius: 999px;
    margin-bottom: 12px;
    padding: 4px 10px;
    font-family:
      DM Mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      monospace;
    font-size: 10px;
    font-weight: 700;
  }
  .stack-card-back h3 {
    max-width: 520px;
    color: var(--ink);
    font-size: max(22px, min(3vw, 36px));
    line-height: 1.04;
  }
  .stack-card-back p {
    max-width: 560px;
    color: var(--muted);
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
  }
  .stack-cat:not(.stack-cat--full) .stack-card-back h3 {
    font-size: max(20px, min(2.2vw, 27px));
  }
  .stack-cat:not(.stack-cat--full) .stack-card-back p {
    font-size: 14px;
  }
  .stack-cat-header {
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    display: flex;
  }
  .stack-cat-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
  }
  .stack-grid.is-visible .stack-cat-dot {
    animation: 0.86s linear both stackDotWake;
  }
  .stack-grid.is-visible .stack-cat:first-child .stack-cat-dot {
    animation-delay: 1.04s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(2) .stack-cat-dot {
    animation-delay: 1.3s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(3) .stack-cat-dot {
    animation-delay: 1.56s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(4) .stack-cat-dot {
    animation-delay: 1.82s;
  }
  .stack-grid.is-visible .stack-cat:nth-child(5) .stack-cat-dot {
    animation-delay: 2.08s;
  }
  .stack-cat-dot--cyan {
    --stack-dot-color: var(--cyan);
    --stack-dot-glow: rgba(77, 146, 255, 0.75);
    background: var(--stack-dot-color);
    box-shadow: 0 0 8px var(--stack-dot-color);
  }
  .stack-cat-dot--green {
    --stack-dot-color: var(--green);
    --stack-dot-glow: rgba(5, 150, 105, 0.75);
    background: var(--stack-dot-color);
    box-shadow: 0 0 8px var(--stack-dot-color);
  }
  .stack-cat-dot--pink {
    --stack-dot-color: var(--pink);
    --stack-dot-glow: rgba(139, 92, 246, 0.75);
    background: var(--stack-dot-color);
    box-shadow: 0 0 8px var(--stack-dot-color);
  }
  .stack-cat-dot--purple {
    --stack-dot-color: var(--purple);
    --stack-dot-glow: rgba(124, 58, 237, 0.75);
    background: var(--stack-dot-color);
    box-shadow: 0 0 8px var(--stack-dot-color);
  }
  .stack-cat-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .stack-chips {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
  }
  .stack-chips span {
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    transition:
      color 0.18s,
      border-color 0.18s,
      background 0.18s;
    transform: translateY(12px) scale(0.94);
  }
  .stack-cat.chips-active .stack-chips span {
    animation: 0.56s cubic-bezier(0.16, 1, 0.3, 1) both chipDistribute;
    animation-delay: var(--chip-delay, 0s);
  }
  .stack-chips span:hover {
    color: var(--ink);
    background: rgba(77, 146, 255, 0.05);
    border-color: rgba(77, 146, 255, 0.3);
  }
  @keyframes stackCardIn {
    0% {
      opacity: 0;
      filter: blur(4px);
      transform: translateY(22px) scale(0.975);
    }
    72% {
      opacity: 1;
      filter: blur();
    }
    to {
      opacity: 1;
      filter: blur();
      transform: translateY(0) scale(1);
    }
  }
  @keyframes stackDotWake {
    0% {
      opacity: 0.1;
      box-shadow: none;
      transform: scale(0.62);
    }
    12%,
    26%,
    40% {
      opacity: 1;
      box-shadow: 0 0 13px var(--stack-dot-glow);
      transform: scale(1.12);
    }
    19%,
    33% {
      opacity: 0.22;
      box-shadow: none;
      transform: scale(0.82);
    }
    58% {
      opacity: 1;
      box-shadow: 0 0 16px var(--stack-dot-glow);
      transform: scale(1.18);
    }
    to {
      opacity: 1;
      box-shadow: 0 0 8px var(--stack-dot-color);
      transform: scale(1);
    }
  }
  @keyframes chipDistribute {
    0% {
      opacity: 0;
      filter: blur(3px);
      transform: translateY(11px) scale(0.92);
    }
    70% {
      opacity: 1;
      filter: blur();
    }
    to {
      opacity: 1;
      filter: blur();
      transform: translateY(0) scale(1);
    }
  }
  @media (max-width: 640px) {
    .stack-grid {
      grid-template-columns: 1fr;
    }
    .stack-cat--full {
      grid-column: 1;
    }
    .stack-card-inner,
    .stack-cat--full .stack-card-inner {
      min-height: 238px;
    }
    .stack-card-back h3,
    .stack-cat:not(.stack-cat--full) .stack-card-back h3 {
      font-size: 22px;
    }
    .stack-card-back p,
    .stack-cat:not(.stack-cat--full) .stack-card-back p {
      font-size: 14px;
    }
  }
  .cv-timeline {
    gap: var(--space-grid);
    flex-direction: column;
    max-width: 836px;
    margin: 0 auto;
    display: flex;
  }
  .cv-block {
    gap: var(--space-grid);
    grid-template-columns: 3px 1fr;
    align-items: start;
    display: grid;
  }
  .cv-block-accent {
    background: linear-gradient(180deg, var(--cyan), var(--green));
    border-radius: 999px;
    align-self: stretch;
    width: 3px;
    min-height: 80px;
  }
  .cv-block-content {
    padding: var(--space-card-standard-y) var(--space-card-standard-x);
    border: 1px solid var(--line);
    border-radius: var(--rx-lg);
    background: rgba(255, 255, 255, 0.5);
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;
    transition: border-color 0.22s;
    display: grid;
  }
  .cv-block-content:hover {
    border-color: rgba(77, 146, 255, 0.25);
  }
  .cv-glyph {
    width: 44px;
    height: 44px;
    color: var(--cyan);
    background:
      radial-gradient(
        circle at 35% 28%,
        rgba(77, 146, 255, 0.18),
        transparent 58%
      ),
      rgba(77, 146, 255, 0.043);
    border: 1px solid rgba(77, 146, 255, 0.2);
    border-radius: 14px;
    grid-row: 1 / span 3;
    align-items: center;
    justify-items: center;
    display: grid;
    box-shadow: 0 0 24px rgba(77, 146, 255, 0.09);
  }
  .cv-glyph--review {
    color: var(--green);
    background:
      radial-gradient(
        circle at 35% 28%,
        rgba(5, 150, 105, 0.17),
        transparent 58%
      ),
      rgba(5, 150, 105, 0.043);
    border-color: rgba(5, 150, 105, 0.2);
    box-shadow: 0 0 24px rgba(5, 150, 105, 0.08);
  }
  .cv-glyph--tools {
    color: var(--purple);
    background:
      radial-gradient(
        circle at 35% 28%,
        rgba(124, 58, 237, 0.18),
        transparent 58%
      ),
      rgba(124, 58, 237, 0.043);
    border-color: rgba(124, 58, 237, 0.22);
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.08);
  }
  .cv-glyph svg {
    width: 27px;
    height: 27px;
  }
  .cv-glyph,
  .cv-block-meta,
  .cv-block-content p,
  .cv-tags {
    opacity: 0;
    transform: translateY(10px);
  }
  .cv-block.is-visible .cv-glyph,
  .cv-block.is-visible .cv-block-meta,
  .cv-block.is-visible .cv-block-content p,
  .cv-block.is-visible .cv-tags {
    animation: 0.62s cubic-bezier(0.16, 1, 0.3, 1) both cvCopyIn;
  }
  .cv-block.is-visible .cv-glyph {
    animation-delay: 80ms;
  }
  .cv-block.is-visible .cv-block-meta {
    animation-delay: 0.15s;
  }
  .cv-block.is-visible .cv-block-content p {
    animation-delay: 0.24s;
  }
  .cv-block.is-visible .cv-tags {
    animation-delay: 0.36s;
  }
  .cv-block-meta {
    flex-wrap: wrap;
    grid-column: 2;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: flex;
  }
  .cv-role {
    font-family:
      Clash Display,
      ui-sans-serif;
    font-size: 18px;
    font-weight: 600;
  }
  .cv-period {
    color: var(--dim);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    font-family:
      DM Mono,
      monospace;
    font-size: 12px;
  }
  .cv-block-content p {
    color: var(--muted);
    grid-column: 2;
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.65;
  }
  .cv-tags {
    flex-wrap: wrap;
    grid-column: 2;
    gap: 6px;
    display: flex;
  }
  .cv-tags span {
    color: var(--dim);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
  }
  @keyframes cvCopyIn {
    0% {
      opacity: 0;
      filter: blur(3px);
      transform: translateY(12px) scale(0.985);
    }
    70% {
      opacity: 1;
      filter: blur();
    }
    to {
      opacity: 1;
      filter: blur();
      transform: translateY(0) scale(1);
    }
  }
  @media (max-width: 640px) {
    .cv-block {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .cv-block-accent {
      display: none;
    }
    .cv-block-content {
      grid-template-columns: 1fr;
    }
    .cv-glyph,
    .cv-block-meta,
    .cv-block-content p,
    .cv-tags {
      grid-column: 1;
    }
    .cv-glyph {
      grid-row: auto;
      margin-bottom: 4px;
    }
  }
  .contact-section {
    padding-bottom: var(--space-section-tight);
  }
  .contact-card {
    padding: var(--space-card-large-y) var(--space-card-large-x);
    border: 1px solid var(--line-s);
    border-radius: var(--rx-xl);
    background: rgba(255, 255, 255, 0.7);
    position: relative;
    overflow: hidden;
  }
  .contact-glow {
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(at 30% 60%, rgba(77, 146, 255, 0.12), transparent 50%),
      radial-gradient(at 70% 40%, rgba(5, 150, 105, 0.1), transparent 50%);
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -40%;
    right: -40%;
  }
  .contact-content {
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    display: flex;
    position: relative;
  }
  .contact-layout {
    z-index: 1;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: max(32px, min(6vw, 78px));
    display: grid;
    position: relative;
  }
  .contact-content h2 {
    font-size: max(26px, min(4vw, 46px));
    position: relative;
  }
  .contact-card.is-visible .contact-content h2 {
    animation: 2.05s cubic-bezier(0.19, 1, 0.22, 1) 1s both ctaHeadlineFlash;
  }
  @keyframes ctaHeadlineFlash {
    0% {
      color: var(--ink);
      text-shadow: none;
      filter: none;
      transform: translateZ(0) scale(1);
    }
    10% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 6px rgba(77, 146, 255, 0.5),
        0 0 18px rgba(77, 146, 255, 0.46);
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.34));
      transform: translateZ(0) scale(1.003);
    }
    18% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 12px rgba(77, 146, 255, 0.85),
        0 0 28px rgba(77, 146, 255, 0.95),
        0 0 58px rgba(5, 150, 105, 0.7),
        0 0 96px rgba(124, 58, 237, 0.42);
      filter: drop-shadow(0 0 22px rgba(77, 146, 255, 0.8));
      transform: translateZ(0) scale(1.012);
    }
    32% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 9px rgba(77, 146, 255, 0.65),
        0 0 22px rgba(77, 146, 255, 0.72),
        0 0 48px rgba(5, 150, 105, 0.48);
      filter: drop-shadow(0 0 14px rgba(5, 150, 105, 0.55));
      transform: translateZ(0) scale(1.006);
    }
    58% {
      color: var(--ink);
      text-shadow:
        0 0 3px rgba(255, 255, 255, 0.32),
        0 0 14px rgba(77, 146, 255, 0.24);
      filter: drop-shadow(0 0 6px rgba(77, 146, 255, 0.22));
      transform: translateZ(0) scale(1.001);
    }
    to {
      color: var(--ink);
      text-shadow: none;
      filter: none;
      transform: translateZ(0) scale(1);
    }
  }
  .contact-content p {
    color: var(--muted);
    max-width: 520px;
    font-size: 17px;
    line-height: 1.65;
  }
  .contact-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 4px;
    display: flex;
  }
  .contact-email {
    color: rgba(77, 146, 255, 0.68);
    letter-spacing: 0.04em;
    align-items: center;
    min-height: 1.4em;
    font-family:
      DM Mono,
      monospace;
    font-size: 14px;
    display: inline-flex;
  }
  .contact-email a {
    color: inherit;
    align-items: center;
    text-decoration: none;
    transition:
      color 0.18s,
      opacity 0.18s;
    display: inline-flex;
  }
  .contact-email a:hover {
    color: rgba(77, 146, 255, 0.92);
  }
  .contact-email span {
    white-space: nowrap;
    width: 0;
    max-width: 21ch;
    display: inline-block;
    overflow: hidden;
  }
  .contact-email:after {
    content: "";
    opacity: 0;
    background: currentColor;
    width: 1px;
    height: 1.05em;
    margin-left: 2px;
    box-shadow: 0 0 10px;
  }
  .contact-card.is-visible .contact-email span {
    animation: 1.9s steps(21, end) 0.46s both contactEmailType;
  }
  .contact-card.is-visible .contact-email:after {
    animation:
      10ms linear 0.46s both contactCursorShow,
      0.9s step-end 2.36s infinite contactCursorBlink;
  }
  .contact-portrait {
    --avatar-size: clamp(214px, 27.6vw, 300px);
    --aura-size: clamp(300px, 39.6vw, 420px);
    --aura-core-size: clamp(264px, 34.8vw, 365px);
    width: var(--avatar-size);
    height: var(--avatar-size);
    isolation: isolate;
    border-radius: 50%;
    justify-self: center;
    align-items: center;
    justify-items: center;
    display: grid;
    position: relative;
  }
  .contact-portrait:before,
  .contact-portrait:after {
    content: "";
    width: var(--aura-size);
    height: var(--aura-size);
    pointer-events: none;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .contact-portrait:before {
    z-index: 0;
    filter: blur(18px) saturate(1.35);
    opacity: 0.74;
    background:
      radial-gradient(
        circle at 28% 30%,
        rgba(77, 146, 255, 0.45),
        transparent 24%
      ),
      radial-gradient(
        circle at 68% 22%,
        rgba(5, 150, 105, 0.32),
        transparent 27%
      ),
      radial-gradient(
        circle at 72% 76%,
        rgba(139, 92, 246, 0.34),
        transparent 30%
      ),
      radial-gradient(
        circle at 24% 72%,
        rgba(124, 58, 237, 0.28),
        transparent 32%
      );
    animation: 13s ease-in-out infinite alternate avatarAurora;
    transform: scale(0.92);
  }
  .contact-portrait:after {
    z-index: 1;
    width: var(--aura-core-size);
    height: var(--aura-core-size);
    filter: blur(10px);
    opacity: 0.55;
    background:
      radial-gradient(
        circle,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 255, 255, 0.72) 70%,
        transparent 73%
      ),
      radial-gradient(
        circle at 50% 45%,
        rgba(255, 255, 255, 0.14),
        transparent 32%
      );
  }
  .avatar-particles,
  .avatar-glow,
  .avatar-orbit,
  .avatar-sheen {
    pointer-events: none;
    position: absolute;
  }
  .avatar-particles {
    z-index: 2;
    width: var(--aura-size);
    height: var(--aura-size);
    mix-blend-mode: screen;
    opacity: 0.88;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .avatar-glow {
    width: var(--aura-size);
    height: var(--aura-size);
    z-index: 2;
    mix-blend-mode: screen;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .avatar-glow-a {
    background: conic-gradient(
      from 120deg,
      transparent 0 11%,
      rgba(77, 146, 255, 0.42) 17%,
      transparent 25% 39%,
      rgba(5, 150, 105, 0.34) 48%,
      transparent 58% 72%,
      rgba(139, 92, 246, 0.32) 81%,
      transparent 92% 100%
    );
    filter: blur(13px);
    opacity: 0.58;
    animation: 18s linear infinite avatarSpin;
  }
  .avatar-glow-b {
    width: calc(var(--avatar-size) * 1.16);
    height: calc(var(--avatar-size) * 1.16);
    filter: blur(16px);
    opacity: 0.46;
    background:
      radial-gradient(at 45% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
      conic-gradient(
        from 260deg,
        rgba(139, 92, 246, 0.22),
        transparent 24%,
        rgba(77, 146, 255, 0.28),
        transparent 58%,
        rgba(5, 150, 105, 0.24),
        transparent 100%
      );
    animation: 9s ease-in-out infinite alternate avatarDrift;
  }
  .avatar-orbit {
    z-index: 3;
    opacity: 0.82;
    transform-origin: 50%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .avatar-orbit-a {
    width: calc(var(--avatar-size) * 1.23);
    height: calc(var(--avatar-size) * 1.23);
    background: conic-gradient(
      from 0deg,
      transparent 0 17%,
      rgba(77, 146, 255, 0.82) 20%,
      transparent 25% 47%,
      rgba(5, 150, 105, 0.62) 51%,
      transparent 56% 78%,
      rgba(139, 92, 246, 0.74) 82%,
      transparent 88% 100%
    );
    filter: drop-shadow(0 0 9px rgba(77, 146, 255, 0.45));
    animation: 12s linear infinite avatarSpin;
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      #000 calc(100% - 1px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      #000 calc(100% - 1px)
    );
  }
  .avatar-orbit-b {
    width: calc(var(--avatar-size) * 1.23);
    height: calc(var(--avatar-size) * 1.23);
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: 7s ease-in-out infinite alternate avatarTilt;
    transform: rotateX(62deg) rotate(-12deg);
    box-shadow:
      0 0 22px rgba(77, 146, 255, 0.2),
      inset 0 0 18px rgba(139, 92, 246, 0.08);
  }
  .avatar-sheen {
    z-index: 5;
    width: var(--avatar-size);
    height: var(--avatar-size);
    mix-blend-mode: screen;
    opacity: 0.52;
    background: linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.22),
      transparent 23%,
      transparent 64%,
      rgba(77, 146, 255, 0.13)
    );
    border-radius: 50%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .avatar-photo-shell {
    z-index: 4;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(77, 146, 255, 0.25),
      0 0 0 10px rgba(77, 146, 255, 0.043),
      0 30px 90px rgba(15, 23, 42, 0.232),
      0 0 70px rgba(77, 146, 255, 0.16);
  }
  .cta-avatar {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes avatarSpin {
    to {
      rotate: 360deg;
    }
  }
  @keyframes avatarAurora {
    0% {
      opacity: 0.64;
      transform: scale(0.9) rotate(-8deg);
    }
    to {
      opacity: 0.86;
      transform: scale(1.02) rotate(8deg);
    }
  }
  @keyframes avatarDrift {
    0% {
      transform: translate(-4px, 6px) scale(0.98);
    }
    to {
      transform: translate(6px, -4px) scale(1.04);
    }
  }
  @keyframes avatarTilt {
    0% {
      transform: rotateX(62deg) rotate(-12deg) scale(0.98);
    }
    to {
      transform: rotateX(58deg) rotate(16deg) scale(1.03);
    }
  }
  @keyframes contactEmailType {
    0% {
      width: 0;
    }
    to {
      width: 21ch;
    }
  }
  @keyframes contactCursorShow {
    to {
      opacity: 1;
    }
  }
  @keyframes contactCursorBlink {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    to {
      opacity: 0;
    }
  }
  @media (max-width: 640px) {
    .contact-card {
      text-align: center;
    }
    .contact-layout {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .contact-content {
      align-items: center;
    }
    .contact-actions {
      justify-content: center;
    }
  }
  .rq-anim-dash .redacted-dash-header {
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    display: flex;
  }
  .rq-timer-wrap {
    align-items: center;
    gap: 8px;
    margin-left: auto;
    display: flex;
  }
  .rq-timer-track {
    background: rgba(77, 146, 255, 0.1);
    border-radius: 999px;
    width: 72px;
    height: 2px;
    overflow: hidden;
  }
  .rq-timer-fill {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    width: 0%;
    height: 100%;
    transition: width 50ms linear;
  }
  .rq-split-body {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: 280px;
    display: grid;
    position: relative;
  }
  .rq-cursor {
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transform-origin: 4px 2px;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.168))
      drop-shadow(0 0 12px rgba(77, 146, 255, 0.18));
    width: 28px;
    height: 40px;
    margin-top: -2px;
    margin-left: -4px;
    transition: opacity 0.2s;
    position: absolute;
  }
  .rq-panel {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px;
    display: flex;
    position: relative;
  }
  .rq-panel--chaos {
    background: radial-gradient(
      at 20% 0,
      rgba(225, 29, 72, 0.04),
      transparent 55%
    );
  }
  .rq-panel--flow {
    background: radial-gradient(
      at 80% 0,
      rgba(5, 150, 105, 0.04),
      transparent 55%
    );
  }
  .rq-panel-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    display: flex;
  }
  .rq-panel-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 2px 9px;
    font-family:
      DM Mono,
      monospace;
    font-size: 9px;
    font-weight: 500;
  }
  .rq-panel-label--chaos {
    color: rgba(225, 29, 72, 0.8);
    background: rgba(225, 29, 72, 0.06);
    border: 1px solid rgba(225, 29, 72, 0.22);
  }
  .rq-panel-label--flow {
    color: rgba(5, 150, 105, 0.85);
    background: rgba(5, 150, 105, 0.05);
    border: 1px solid rgba(5, 150, 105, 0.22);
  }
  .rq-panel-title {
    min-width: 0;
    color: var(--dim);
    letter-spacing: 0.02em;
    font-family:
      DM Mono,
      monospace;
    font-size: 11px;
  }
  .rq-panel-rows {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-width: 0;
    display: flex;
  }
  .rq-row {
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    transition:
      border-color 0.25s,
      box-shadow 0.25s,
      background 0.25s;
    display: flex;
    position: relative;
  }
  .rq-row .redact-copy strong {
    font-size: 12px;
  }
  .rq-row .redact-copy span {
    font-size: 10.5px;
  }
  .rq-row .redact-progress {
    margin-top: 7px;
  }
  .rq-panel--flow #fr3 {
    height: 74px;
    min-height: 74px;
  }
  .rq-panel--flow #fr3 .redact-copy {
    flex-direction: column;
    justify-content: center;
    min-height: 48px;
    display: flex;
  }
  .rq-row-icon {
    letter-spacing: 0.02em;
    border-radius: 7px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-family:
      DM Mono,
      monospace;
    font-size: 10px;
    font-weight: 600;
    display: flex;
  }
  .rq-row-icon--muted {
    color: var(--muted);
    background: rgba(148, 156, 170, 0.25);
  }
  .rq-row-icon--warn {
    color: rgb(217, 119, 6);
    background: rgba(217, 119, 6, 0.1);
  }
  .rq-row-icon--dim {
    color: var(--dim);
    background: rgba(148, 156, 170, 0.15);
  }
  .rq-row-icon--red {
    color: rgb(225, 29, 72);
    background: rgba(225, 29, 72, 0.1);
  }
  .rq-row-icon--cyan {
    color: var(--cyan);
    background: rgba(77, 146, 255, 0.1);
  }
  .rq-row-icon--purple {
    color: var(--purple);
    background: rgba(124, 58, 237, 0.12);
  }
  .rq-row-icon--green {
    color: var(--green);
    background: rgba(5, 150, 105, 0.1);
  }
  .rq-row-flash {
    z-index: 2;
    border-radius: var(--rx-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .rq-row-flash--red {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.45);
  }
  .rq-row-flash--green {
    background: rgba(5, 150, 105, 0.07);
    border: 1px solid rgba(5, 150, 105, 0.35);
  }
  .rq-type-field {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(77, 146, 255, 0.1);
    border-radius: 5px;
    align-items: center;
    gap: 1px;
    min-height: 22px;
    margin-top: 6px;
    padding: 4px 8px;
    font-family:
      DM Mono,
      monospace;
    font-size: 10.5px;
    display: flex;
  }
  .rq-type-field.field-error {
    border-color: rgba(225, 29, 72, 0.55);
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1);
  }
  .rq-type-key {
    color: var(--cyan);
  }
  .rq-type-sep {
    color: var(--dim);
    margin: 0 2px;
  }
  .rq-type-caret {
    background: var(--cyan);
    opacity: 0;
    width: 1.5px;
    height: 11px;
    margin-left: 1px;
    animation: 0.85s step-end infinite rqBlink;
    display: inline-block;
  }
  @keyframes rqBlink {
    0%,
    to {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  .rq-progress-red i {
    background: linear-gradient(
      90deg,
      rgb(225, 29, 72),
      rgb(217, 119, 6)
    ) !important;
  }
  .rq-thinking {
    visibility: hidden;
    align-items: center;
    gap: 4px;
    height: 4px;
    margin-top: 6px;
    display: flex;
  }
  .rq-thinking.visible {
    visibility: visible;
  }
  .rq-thinking span {
    background: var(--purple);
    opacity: 0;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    animation: 1.1s ease-in-out infinite rqDot;
  }
  .rq-thinking span:nth-child(2) {
    animation-delay: 0.18s;
  }
  .rq-thinking span:nth-child(3) {
    animation-delay: 0.36s;
  }
  @keyframes rqDot {
    0%,
    80%,
    to {
      opacity: 0;
      transform: scale(0.7);
    }
    40% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .rq-divider {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 1px;
    padding: 16px 0;
    display: flex;
    position: relative;
  }
  .rq-divider-line {
    background: linear-gradient(
      transparent,
      rgba(77, 146, 255, 0.18) 30%,
      rgba(77, 146, 255, 0.18) 70%,
      transparent
    );
    flex: 1;
    width: 1px;
  }
  .rq-divider-vs {
    color: var(--dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    padding: 6px 0;
    font-family:
      DM Mono,
      monospace;
    font-size: 9px;
    transform: rotate(180deg);
  }
  .rq-approve-stamp {
    z-index: 20;
    border: 1.5px solid var(--green);
    border-radius: var(--rx-md);
    color: var(--green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    background: rgba(5, 150, 105, 0.08);
    padding: 9px 22px;
    font-family:
      Clash Display,
      DM Sans,
      sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition:
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(-6deg);
    box-shadow: 0 0 32px rgba(5, 150, 105, 0.15);
  }
  .rq-approve-stamp.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-4deg);
  }
  .rq-row.rq-lit {
    background: rgba(77, 146, 255, 0.04) !important;
    border-color: rgba(77, 146, 255, 0.22) !important;
  }
  .rq-row.rq-done-green {
    background: rgba(5, 150, 105, 0.03) !important;
    border-color: rgba(5, 150, 105, 0.2) !important;
  }
  .rq-row.rq-done-purple {
    background: rgba(124, 58, 237, 0.03) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .rq-row.rq-error {
    background: rgba(225, 29, 72, 0.05) !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
  }
  @keyframes rqGlitch {
    0%,
    to {
      filter: none;
      transform: none;
    }
    30% {
      filter: hue-rotate(15deg);
      transform: translate(-2px);
    }
    60% {
      filter: hue-rotate(-10deg);
      transform: translate(2px);
    }
    90% {
      transform: none;
    }
  }
  .rq-glitch {
    animation: 0.35s both rqGlitch;
  }
  #rqAnimDash[data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  @media (max-width: 640px) {
    .rq-split-body {
      grid-template-rows: auto auto auto;
      grid-template-columns: 1fr;
    }
    .rq-divider {
      flex-direction: row;
      width: 100%;
      height: 1px;
      padding: 0 16px;
    }
    .rq-divider-line {
      background: linear-gradient(
        90deg,
        transparent,
        rgba(77, 146, 255, 0.18) 30%,
        rgba(77, 146, 255, 0.18) 70%,
        transparent
      );
      width: auto;
      height: 1px;
    }
    .rq-divider-vs {
      writing-mode: horizontal-tb;
      padding: 0 8px;
      transform: none;
    }
    .rq-cursor {
      display: none;
    }
  }
  .site-footer {
    z-index: 2;
    border-top: 1px solid var(--line);
    padding: 28px 0;
    position: relative;
  }
  .site-footer .inner {
    color: var(--dim);
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    display: grid;
  }
  .footer-name {
    grid-column: 1;
    justify-self: start;
  }
  .footer-email {
    text-align: center;
    grid-column: 2;
    justify-self: center;
  }
  .site-footer a {
    color: var(--cyan);
    opacity: 0.5;
    transition: opacity 0.18s;
  }
  .site-footer a:hover {
    opacity: 0.75;
  }
  .footer-note {
    letter-spacing: 0.08em;
    grid-column: 3;
    justify-self: end;
    font-style: normal;
  }
  @media (max-width: 640px) {
    .site-footer .inner {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .footer-name,
    .footer-email,
    .footer-note {
      grid-column: auto;
      justify-self: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    :before,
    :after {
      scroll-behavior: auto !important;
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
    }
    .metrics-band .metric-card,
    .metrics-band .metric-divider,
    .origin-loop-item,
    .flow-diagram .flow-node,
    .flow-diagram .flow-arrow,
    .stack-cat-dot,
    .stack-chips span {
      opacity: 1;
      filter: none;
      transform: none;
    }
  }
  .nav:before {
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }
  @media (max-width: 800px) {
    .nav-links {
      backdrop-filter: blur(20px) saturate(1.35);
      -webkit-backdrop-filter: blur(20px) saturate(1.35);
    }
  }
}

/* =====================================================
   Light mode — surface & atmosphere overrides
   ===================================================== */
@media (prefers-color-scheme: light) {
  /* ===========================================================
   Light mode — surface/atmosphere overrides on top of the
   transformed token system (styles.light.css).
   Loaded only under: media="(prefers-color-scheme: light)"
   =========================================================== */
  :root {
    color-scheme: light;
  }
  .btn {
    min-height: 52px;
    height: auto;
    padding: 0 26px;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    transition:
      transform 0.22s var(--ease),
      box-shadow 0.22s var(--ease),
      opacity 0.2s !important;
  }
  .btn:hover {
    transform: translateY(-2px);
  }
  .nav-cta {
    margin-left: 0;
    padding: 10px 20px !important;
    font-size: 14px;
    height: auto;
  }
  .primary-cta {
    gap: 0.75ch;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff !important;
    background: linear-gradient(
      105deg,
      #4d92ff -8%,
      #4d92ff 34%,
      rgb(5, 150, 105) 76%,
      rgb(124, 58, 237) 118%
    ) !important;
    background-size: 185% 100% !important;
    background-position: 48% 50% !important;
    box-shadow:
      0 16px 34px rgba(77, 146, 255, 0.22),
      0 0 26px rgba(5, 150, 105, 0.12),
      0 0 36px rgba(124, 58, 237, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.3) !important;
    filter: saturate(1.06) brightness(1.04);
    font-weight: 600 !important;
    border-radius: 999px !important;
    transition:
      opacity 0.2s,
      text-shadow 0.22s var(--ease),
      transform 0.2s !important;
  }
  .primary-cta:hover {
    opacity: 0.88;
    color: #ffffff !important;
    filter: saturate(1.06) brightness(1.04) !important;
    background: linear-gradient(
      105deg,
      #4d92ff -8%,
      #4d92ff 34%,
      rgb(5, 150, 105) 76%,
      rgb(124, 58, 237) 118%
    ) !important;
    background-size: 185% 100% !important;
    background-position: 48% 50% !important;
    box-shadow:
      0 16px 34px rgba(77, 146, 255, 0.22),
      0 0 26px rgba(5, 150, 105, 0.12),
      0 0 36px rgba(124, 58, 237, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
  }
  .primary-cta:hover > span:first-child,
  .nav-cta:hover > span:first-child {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.72),
      0 0 18px rgba(255, 255, 255, 0.32);
  }
  .btn-primary.primary-cta:hover {
    transform: translateY(-2px);
  }
  .btn-primary:hover .btn-glyph,
  .nav-cta:hover .btn-glyph {
    opacity: 1;
    transform: none;
  }
  .btn-ghost {
    border: 1px solid rgba(77, 146, 255, 0.26) !important;
    color: var(--ink) !important;
    background: rgba(77, 146, 255, 0.05) !important;
  }
  .hero-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.5) !important;
  }
  .btn-ghost:hover {
    background: rgba(57, 232, 255, 0.09) !important;
    border-color: rgba(57, 232, 255, 0.35) !important;
  }
  .primary-cta > * {
    position: relative;
    z-index: 2;
  }
  .primary-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32),
      transparent 52%,
      rgba(15, 23, 42, 0.06)
    );
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .primary-cta::after {
    content: "";
    position: absolute;
    inset: -48%;
    z-index: 0;
    border-radius: inherit;
    background:
      radial-gradient(ellipse at 12% 48%, rgba(185, 251, 255, 0.54), transparent 60%),
      radial-gradient(ellipse at 52% 52%, rgba(201, 255, 232, 0.42), transparent 64%),
      radial-gradient(ellipse at 92% 50%, rgba(255, 195, 251, 0.42), transparent 66%);
    opacity: 0.72;
    filter: blur(18px) saturate(1.3) brightness(1.12);
    transform: translateZ(0) scale(1.03);
    animation: buttonGlowPulseLight 3.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes buttonGlowPulseLight {
    0%,
    100% {
      opacity: 0.68;
      filter: blur(17px) saturate(1.22) brightness(1.08);
      transform: translateZ(0) scale(1);
    }
    50% {
      opacity: 0.9;
      filter: blur(25px) saturate(1.42) brightness(1.18);
      transform: translateZ(0) scale(1.06);
    }
  }
  .btn-glyph,
  .nav-cta .btn-glyph {
    color: #ffffff !important;
  }
  .brand-name {
    display: inline;
    color: inherit !important;
    filter: none;
  }
  .brand-name sup {
    background: none !important;
    color: #4d92ff !important;
    font-size: 10px !important;
    line-height: 0;
    margin-left: 1px;
    transform: none;
    vertical-align: super;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
  .brand-word {
    background: none !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
  }
  .brand-word::after {
    content: none;
  }
  @keyframes brandNameGlowPulseLight {
    0%,
    100% {
      opacity: 0.68;
      filter: blur(5px) saturate(1.38) brightness(1.18);
      transform: translateZ(0) scale(1.02);
    }
    50% {
      opacity: 0.96;
      filter: blur(8px) saturate(1.58) brightness(1.28);
      transform: translateZ(0) scale(1.05);
    }
  }
  .section-label,
  .redact-label {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 24px;
    padding: 7px 14px !important;
    border: 1px solid rgba(77, 146, 255, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(77, 146, 255, 0.06) !important;
    color: #4d92ff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    text-transform: uppercase;
  }
  .hero-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 24px;
    padding: 7px 14px !important;
    border: 1px solid rgba(77, 146, 255, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(77, 146, 255, 0.06) !important;
    color: #4d92ff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    text-transform: uppercase;
  }
  .section-header .section-label {
    margin-left: auto;
    margin-right: auto;
  }
  .case-study-header .section-label,
  .origin-content .section-label,
  .contact-content .section-label,
  .module-header .section-label {
    margin-left: 0;
    margin-right: 0;
  }
  .eyebrow-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px;
    background: rgb(5, 150, 105) !important;
    flex-shrink: 0;
    box-shadow: none !important;
    animation: pulse 2.2s infinite;
  }
  .redact-label {
    margin-bottom: 0;
  }
  .origin-loop-item > span {
    color: #4d92ff !important;
    border-color: rgba(77, 146, 255, 0.34) !important;
    background: rgba(77, 146, 255, 0.07) !important;
  }
  .cap-icon {
    color: #4d92ff !important;
    border-color: rgba(77, 146, 255, 0.22) !important;
    background: rgba(77, 146, 255, 0.06) !important;
  }
  .process-step-icon {
    color: #4d92ff !important;
    border-color: rgba(77, 146, 255, 0.22) !important;
    background: rgba(77, 146, 255, 0.06) !important;
  }
  .flow-node--input .flow-node-icon,
  .flow-node--process .flow-node-icon,
  .flow-node--ai .flow-node-icon {
    color: #4d92ff !important;
  }
  .flow-node--process,
  .flow-node--ai {
    border-color: rgba(77, 146, 255, 0.3) !important;
  }
  .origin-tax-meter {
    border-color: rgba(77, 146, 255, 0.22) !important;
  }
  .origin-tax-meter span {
    color: #4d92ff !important;
  }
  .rq-timer-fill {
    background: linear-gradient(
      105deg,
      #4d92ff -8%,
      #4d92ff 34%,
      rgb(5, 150, 105) 76%,
      rgb(124, 58, 237) 118%
    ) !important;
  }
  .origin-tax-meter i {
    background: rgba(77, 146, 255, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(77, 146, 255, 0.1);
  }
  .origin-tax-meter i:before {
    background: #4d92ff !important;
    box-shadow:
      0 0 18px rgba(77, 146, 255, 0.48),
      0 0 32px rgba(139, 185, 255, 0.34) !important;
  }
  @keyframes originMeterFill {
    0%,
    8% {
      filter: none;
      transform: scaleX(0);
    }
    39% {
      filter: brightness(1.08) drop-shadow(0 0 10px rgba(77, 146, 255, 0.56));
      transform: scaleX(1);
    }
    50%,
    70% {
      filter:
        brightness(1.24)
        drop-shadow(0 0 10px rgba(77, 146, 255, 0.72))
        drop-shadow(0 0 22px rgba(139, 185, 255, 0.48));
      transform: scaleX(1);
    }
    90%,
    to {
      filter: none;
      transform: scaleX(1);
    }
  }
  @keyframes originMeterGlow {
    0%,
    8%,
    90%,
    to {
      filter: none;
      box-shadow: inset 0 0 0 1px rgba(77, 146, 255, 0.1);
    }
    39% {
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.46));
      box-shadow:
        inset 0 0 0 1px rgba(77, 146, 255, 0.16),
        0 0 14px rgba(139, 185, 255, 0.24);
    }
    50%,
    70% {
      filter:
        drop-shadow(0 0 10px rgba(77, 146, 255, 0.66))
        drop-shadow(0 0 24px rgba(139, 185, 255, 0.34));
      box-shadow:
        inset 0 0 0 1px rgba(77, 146, 255, 0.2),
        0 0 18px rgba(77, 146, 255, 0.34),
        0 0 34px rgba(139, 185, 255, 0.22);
    }
  }
  .stack-cat-dot--cyan {
    --stack-dot-color: #4d92ff;
    --stack-dot-glow: rgba(77, 146, 255, 0.72);
  }
  .stack-cat-dot--green {
    --stack-dot-color: #6ee7b7;
    --stack-dot-glow: rgba(110, 231, 183, 0.72);
  }
  .stack-cat-dot--pink {
    --stack-dot-color: #a855f7;
    --stack-dot-glow: rgba(168, 85, 247, 0.72);
  }
  .stack-cat-dot--purple {
    --stack-dot-color: #8b5cf6;
    --stack-dot-glow: rgba(139, 92, 246, 0.74);
  }
  .stack-cat-dot {
    background: var(--stack-dot-color) !important;
    box-shadow: 0 0 8px var(--stack-dot-color) !important;
  }
  .avatar-sheen {
    background: linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.92),
      transparent 23% 64%,
      rgba(57, 232, 255, 0.9)
    ) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    transform-origin: center;
    animation: avatarSheenRotate 5s linear infinite !important;
    will-change: transform;
  }
  @keyframes avatarSheenRotate {
    to {
      transform: rotate(360deg);
    }
  }

  /* --- Hero dot-matrix: invert dark PNG + multiply blend for light bg --- */
  .hero-dot-matrix {
    filter: invert(1) contrast(2) !important;
    mix-blend-mode: multiply !important;
    opacity: 0.7 !important;
  }

  .hero-headline em {
    background-image: linear-gradient(
      105deg,
      #4d92ff 0%,
      #4d92ff 26%,
      rgb(5, 150, 105) 52%,
      rgb(124, 58, 237) 78%,
      #4d92ff 100%
    ) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: visible;
    padding-right: 0.08em;
    filter: saturate(1.25) brightness(1.1)
      drop-shadow(0 0 10px rgba(77, 146, 255, 0.2))
      drop-shadow(0 0 22px rgba(5, 150, 105, 0.1));
  }
  .hero-headline em::before {
    content: none;
  }
  .hero-headline em::after {
    background-image: linear-gradient(
      90deg,
      #b9fbff 0%,
      #c9ffe8 50%,
      #ffc3fb 100%
    ) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    inset: 0 -0.08em 0 0;
    opacity: 0.66;
    filter: blur(17px) saturate(1.38) brightness(1.18);
    animation-name: heroTitleGlowPulseLight;
  }
  @keyframes heroTitleGlowPulseLight {
    0%,
    100% {
      opacity: 0.66;
      filter: blur(17px) saturate(1.38) brightness(1.18);
      transform: translateZ(0) scale(1.01);
    }
    50% {
      opacity: 1;
      filter: blur(27px) saturate(1.65) brightness(1.35);
      transform: translateZ(0) scale(1.03);
    }
  }

  /* --- Ambient color washes: soften for a bright canvas --- */
  .ambient {
    opacity: 0.32 !important;
    filter: blur(110px) !important;
  }
  .scanline {
    opacity: 0.015 !important;
  }

  /* --- Nav blur — desktop (on ::before to match dark mode, avoids breaking child blur) --- */
  .nav::before {
    -webkit-backdrop-filter: blur(20px) brightness(0.85) saturate(2)
      contrast(1.25) !important;
    backdrop-filter: blur(20px) brightness(0.85) saturate(2) contrast(1.25) !important;
  }
  .nav {
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 18px 40px -22px rgba(15, 23, 42, 0.28),
      0 2px 8px -4px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(15, 23, 42, 0.035);
  }

  /* --- Nav blur — mobile dropdown panel (same params as desktop) --- */
  @media (max-width: 800px) {
    .nav-links {
      -webkit-backdrop-filter: blur(20px) brightness(0.85) saturate(2)
        contrast(1.25) !important;
      backdrop-filter: blur(20px) brightness(0.85) saturate(2) contrast(1.25) !important;
    }
  }

  /* --- Contact portrait particles: 75% opacity in light mode --- */
  .avatar-particles {
    opacity: 0.75 !important;
  }

  /* --- ctaHeadlineFlash: all glow alphas halved for light bg --- */
  @keyframes ctaHeadlineFlash {
    0% {
      color: var(--ink);
      text-shadow: none;
      filter: none;
      transform: translateZ(0) scale(1);
    }
    10% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 6px rgba(77, 146, 255, 0.25),
        0 0 18px rgba(77, 146, 255, 0.23);
      filter: drop-shadow(0 0 8px rgba(77, 146, 255, 0.17));
      transform: translateZ(0) scale(1.003);
    }
    18% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 12px rgba(77, 146, 255, 0.425),
        0 0 28px rgba(77, 146, 255, 0.475),
        0 0 58px rgba(5, 150, 105, 0.35),
        0 0 96px rgba(124, 58, 237, 0.21);
      filter: drop-shadow(0 0 22px rgba(77, 146, 255, 0.4));
      transform: translateZ(0) scale(1.012);
    }
    32% {
      color: rgb(14, 22, 38);
      text-shadow:
        0 0 9px rgba(77, 146, 255, 0.325),
        0 0 22px rgba(77, 146, 255, 0.36),
        0 0 48px rgba(5, 150, 105, 0.24);
      filter: drop-shadow(0 0 14px rgba(5, 150, 105, 0.275));
      transform: translateZ(0) scale(1.006);
    }
    58% {
      color: var(--ink);
      text-shadow:
        0 0 3px rgba(255, 255, 255, 0.16),
        0 0 14px rgba(77, 146, 255, 0.12);
      filter: drop-shadow(0 0 6px rgba(77, 146, 255, 0.11));
      transform: translateZ(0) scale(1.001);
    }
    100% {
      color: var(--ink);
      text-shadow: none;
      filter: none;
      transform: translateZ(0) scale(1);
    }
  }

  /* --- Product mock surfaces → clean light windows --- */
  .mock-window {
    background:
      radial-gradient(at 18% 0, rgba(77, 146, 255, 0.1), transparent 36%),
      radial-gradient(at 84% 18%, rgba(5, 150, 105, 0.05), transparent 42%),
      #ffffff !important;
  }
  .mock-main {
    background:
      radial-gradient(at 88% 0, rgba(5, 150, 105, 0.05), transparent 42%),
      radial-gradient(at 18% 4%, rgba(77, 146, 255, 0.05), transparent 38%),
      rgba(255, 255, 255, 0.6) !important;
  }
  .mock-window-bar {
    background:
      linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)),
      #eef1f5 !important;
  }
}

/* iOS light-mode CTA glow-bleed fix:
   WebKit can rasterize filtered pseudo-layers as rectangular GPU surfaces.
   Keep the pastel glow, but move it into a masked child layer clipped to the pill. */
.primary-cta-clip {
  display: none;
}

@supports (-webkit-touch-callout: none) {
  @media (prefers-color-scheme: light) {
    .primary-cta::before,
    .primary-cta::after {
      display: none !important;
      content: none !important;
      animation: none !important;
      filter: none !important;
      backdrop-filter: none !important;
      opacity: 0 !important;
    }
    .primary-cta {
      overflow: hidden !important;
      isolation: isolate !important;
      will-change: auto !important;
      clip-path: inset(0 round 999px);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .primary-cta-clip {
      display: block;
      position: absolute !important;
      inset: 0;
      z-index: 1 !important;
      overflow: hidden;
      border-radius: inherit;
      pointer-events: none;
      clip-path: inset(0 round 999px);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .primary-cta-clip::before {
      content: "";
      position: absolute;
      inset: -48%;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at 12% 48%, rgba(185, 251, 255, 0.54), transparent 60%),
        radial-gradient(ellipse at 52% 52%, rgba(201, 255, 232, 0.42), transparent 64%),
        radial-gradient(ellipse at 92% 50%, rgba(255, 195, 251, 0.42), transparent 66%);
      opacity: 0.72;
      filter: blur(18px) saturate(1.3) brightness(1.12);
      transform: translateZ(0) scale(1.03);
    }
    .primary-cta-clip::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32),
        transparent 52%,
        rgba(15, 23, 42, 0.06)
      );
      mix-blend-mode: screen;
    }
  }
}

@media (hover: none) and (pointer: coarse) {
  @media (prefers-color-scheme: light) {
    .primary-cta::before,
    .primary-cta::after {
      display: none !important;
      content: none !important;
      animation: none !important;
      filter: none !important;
      backdrop-filter: none !important;
      opacity: 0 !important;
    }
    .primary-cta {
      overflow: hidden !important;
      isolation: isolate !important;
      will-change: auto !important;
      clip-path: inset(0 round 999px);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .primary-cta-clip {
      display: block;
      position: absolute !important;
      inset: 0;
      z-index: 1 !important;
      overflow: hidden;
      border-radius: inherit;
      pointer-events: none;
      clip-path: inset(0 round 999px);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .primary-cta-clip::before {
      content: "";
      position: absolute;
      inset: -48%;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at 12% 48%, rgba(185, 251, 255, 0.54), transparent 60%),
        radial-gradient(ellipse at 52% 52%, rgba(201, 255, 232, 0.42), transparent 64%),
        radial-gradient(ellipse at 92% 50%, rgba(255, 195, 251, 0.42), transparent 66%);
      opacity: 0.72;
      filter: blur(18px) saturate(1.3) brightness(1.12);
      transform: translateZ(0) scale(1.03);
    }
    .primary-cta-clip::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32),
        transparent 52%,
        rgba(15, 23, 42, 0.06)
      );
      mix-blend-mode: screen;
    }
  }
}